axios对请求各种异常情况处理的封装方法
前端采用了axios来处理网络请求，为了避免在每次请求时都去判断各种各样的网络情况，比如连接超时、服务器内部错误、权限不足等等不一而足，我对axios进行了简单的封装，这里主要使用了axios中的拦截器功能。
封装后的网络请求工具js如下
importaxiosfrom'axios'
import{Toast}from'mint-ui'
//请求时的拦截
axios.interceptors.request.use(config=>{
returnconfig;
},err=>{
Toast('请求超时!');
returnPromise.resolve(err);
})
//响应时的拦截
axios.interceptors.response.use(data=>{
//返回响应时做一些处理
//第一种方式
constdata=response.data
//根据返回的code值来做不同的处理（和后端约定）
switch(data.code){
case'0':
//举例
//exp:修复iPhone6+微信点击返回出现页面空白的问题
if(isIOS()){
//异步以保证数据已渲染到页面上
setTimeout(()=>{
//通过滚动强制浏览器进行页面重绘
document.body.scrollTop+=1
},0)
}
//这一步保证数据返回，如果没有return则会走接下来的代码，不是未登录就是报错
returndata
//需要重新登录
case'SHIRO_E5001':
//微信生产环境下授权登录
if(isWeChat()&&IS_PRODUCTION){
axios.get(apis.common.wechat.authorizeUrl).then(({result})=>{
location.replace(global.decodeURIComponent(result))
})
}else{
//否则跳转到h5登录并带上跳转路由
constsearch=encodeSearchParams({
next:location.href,
})
location.replace(`/user/login?${search}`)
}
//不显示提示消息
data.description=''
break
default:
}
//若不是正确的返回code，且已经登录，就抛出错误
consterr=newError(data.description)
err.data=data
err.response=response
//第二种方式，我采取的
if(data.status&&data.status==200&&data.data.status=='error'){
Toast(data.data.msg);
returndata;
}
returndata;
},err=>{
//当响应异常时做一些处理
if(err&&err.response){
switch(err.response.status){
case400:err.message='请求错误(400)';break;
case401:err.message='未授权，请重新登录(401)';break;
case403:err.message='拒绝访问(403)';break;
case404:err.message='请求出错(404)';break;
case408:err.message='请求超时(408)';break;
case500:err.message='服务器错误(500)';break;
case501:err.message='服务未实现(501)';break;
case502:err.message='网络错误(502)';break;
case503:err.message='服务不可用(503)';break;
case504:err.message='网络超时(504)';break;
case505:err.message='HTTP版本不受支持(505)';break;
default:err.message=`连接出错(${err.response.status})!`;
}
}else{
err.message='连接服务器失败!'
}
Toast(err.message);
returnPromise.resolve(err);
})
//如果需要可以封装一些请求的方法
letbase='';
exportconstpostRequest=(url,params)=>{
returnaxios({
method:'post',
url:`${base}${url}`,
data:params,
transformRequest:[function(data){
letret=''
for(letitindata){
ret+=encodeURIComponent(it)+'='+encodeURIComponent(data[it])+'&'
}
returnret
}],
headers:{
'Content-Type':'application/x-www-form-urlencoded'
}
});
}
exportconstuploadFileRequest=(url,params)=>{
returnaxios({
method:'post',
url:`${base}${url}`,
data:params,
headers:{
'Content-Type':'multipart/form-data'
}
});
}
exportconstputRequest=(url,params)=>{
returnaxios({
method:'put',
url:`${base}${url}`,
data:params,
transformRequest:[function(data){
letret=''
for(letitindata){
ret+=encodeURIComponent(it)+'='+encodeURIComponent(data[it])+'&'
}
returnret
}],
headers:{
'Content-Type':'application/x-www-form-urlencoded'
}
});
}
exportconstdeleteRequest=(url)=>{
returnaxios({
method:'delete',
url:`${base}${url}`
});
}
exportconstget=(url,params)=>{
returnaxios({
method:'get',
url:`${base}${url}?`,
params:params,
headers:{
'Content-Type':'application/x-www-form-urlencoded',
'Access-Token':localStorage.getItem("AccessToken")
}
});
}
封装之后的错误信息这个大家一目了然，没啥好说的，唯一要说的是当出错的时候我执行的是：Promise.resolve(err);，而不是Promise.reject(err);
这是什么原因呢？因为封装axios一个重要的目的就是希望能够对错误进行统一处理，不用在每一次发起网络请求的时候都去处理各种异常情况，将所有的异常情况都在工具js中进行统一的处理。但是这种方式也带来一个问题，就是我在发起网络请求的时候，一般都会开启一个进度条，当网络请求结束时，不论请求成功还是失败，我都要将这个进度条关闭掉，而失败的处理我都统一写在工具js里边了，因此就没在请求失败时关闭进度条了，解决这个问题，有两种方案：
1.直接在request的拦截器中开启一个fullscreen的loading，然后在response的拦截器中将其关闭，即我将进度条也封装到工具js中了，但是非常不推荐这种方式，因为这种方式的用户体验非常之差，有兴趣的小伙伴可以自己试一下就知道了。
2.第二种解决方案就是大家看到的，我返回一个Promise.resolve(err)，则这个请求不会就此结束，错误的message我已经弹出来了，但是这条消息还是会继续传到then中，也就是说，无论请求成功还是失败，我在成功的回调中都能收到通知，这样我就可以将loading关闭了，比如下面这个登录请求：
var_this=this;
this.loading=true;
this.postRequest('/login',{
username:this.loginForm.username,
password:this.loginForm.password
}).then(resp=>{
_this.loading=false;
if(resp&&resp.status==200){
_this.getRequest("/config/hr").then(resp=>{
if(resp&&resp.status==200){
vardata=resp.data;
_this.$store.commit('login',data);
varpath=_this.$route.query.redirect;
_this.$router.replace({path:path=='/'||path==undefined?'/home':path});
}
})
}
添加Vue插件
由于我对axios进行了封装，因此在每一个需要使用axios的地方，都需要导入相应的请求，略显麻烦，参考https://cn.vuejs.org/v2/guide/plugins.html，我将请求方法挂到Vue上，具体操作如下：
1.在main.js中导入所有的请求方法，如下：
import{get}from'./utils/api'
import{postRequest}from'./utils/api'
import{deleteRequest}from'./utils/api'
import{putRequest}from'./utils/api'
2.把它们添加到Vue.prototype上，如下：
Vue.prototype.getRequest=getRequest; Vue.prototype.postRequest=postRequest; Vue.prototype.deleteRequest=deleteRequest; Vue.prototype.putRequest=putRequest;
如此之后，以后再需要发送网络请求，就不需要导入api了，直接通过下面这种方式即可：
Post方法：
this.postRequest('/login',{
username:this.loginForm.username,
password:this.loginForm.password
}).then(resp=>{
...
}
});
GET方法：
_this.get(
this.url_s+"/Notice/findTotalCount",{
userId:localStorage.getItem("userid"),
openId:localStorage.getItem('openId')
}
)
.then(function(res){
//
})
以上这篇axios对请求各种异常情况处理的封装方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。