一般vue项目都会对axios进行封装,后台统一规范默认让服务器对所有请求都返回成功,然后在成功的对象里面包装一层对象result,里面也包含code,msg,result信息,前端拿这个result里面的code来做判断接口是否相应成功;类似如下:
const api = axios.create({
baseURL:'',
transformRequest;[data =>{qs.stringify(data)}]
})
api.interceptors.response.use(function (response) {
return response;
}, function (error) {
let data = {}
if(err.message.indexOf('timeout')>-1){
data.message = '请求超时'
return { data }
}
。。。
。。。
return error;
});
平常用惯了项目封装的axios的请求和异常处理;突然一下子不用封装的,单独将axios引入用(比如多个文件和表单数据一起上传);一下没想出来,一查资料其实也简单,怕忘记,记录如下:
两种方式:
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
console.log(error.response) //服务器返回的错误信息,常见的400请求错了,这里能看到400请求返回的错误信息
return Promise.reject(error);
});
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// 请求已发出,但服务器响应的状态码不在 2xx 范围内
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else {
console.log('Error', error.message);
}
console.log(error.config);
});