axios的封装与异常处理(async/await)
众所周知,es新增了promise,避免了回调地狱。而es7的async/await更加完美的将异步实现为同步代码。更多关于promise,async/await,推荐:阮一峰在vue项目中,http请求我们更多用到的是axios,如果不进行封装,那么在业务代码中的每次请求都需要重复大量的axios请求代码,下面以get方法为例进行初步的封装,新建http.js如下:import axios...
·
众所周知,es新增了promise,避免了回调地狱。而es7的async/await更加完美的将异步实现为同步代码。
更多关于promise,async/await,推荐:阮一峰
在vue项目中,http请求我们更多用到的是axios,如果不进行封装,那么在业务代码中的每次请求都需要重复大量的axios请求代码,下面以get方法为例进行初步的封装,新建http.js如下:
import axios from 'axios';
//拦截器
service.interceptors.response.use(
response => {
const { data: { code, message } } = response;
if (code === 10){
return response;
} else if (code === 20) {
//错误处理
throw new Error(`response code = 20!, message: ${message}`);
}
},
error => {
//异常处理
return Promise.reject(error.response.data);
}
);
get(url) {
return new Promise((resolve,reject) => {
service({
method: 'get',
url
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err);
})
});
},
那么我在业务代码中请求就很简单了,
//vue-cli的main.js中
import http from './http.js'; //引入上面创建的http.js
Vue.prototype.$http = http;
//业务代码中
try {
const res = await this.$http.get(url1);
const res = await this.$http.get(url2);
...
//成功处理
} catch (error) {
console.error(error);
//错误处理
}
另外post、put等方法同理可进行简单的封装。
更多推荐
已为社区贡献3条内容
所有评论(0)