axios对请求各种异常情况处理的封装⽅法
前端采⽤了axios来处理⽹络请求，为了避免在每次请求时都去判断各种各样的⽹络情况，⽐如连接超时、服务器内部错误、权限不⾜等等不⼀⽽⾜，我对axios进⾏了简单的封装，这⾥主要使⽤了axios中的拦截器功能。
封装后的⽹络请求⼯具js如下
import axios from 'axios'
import { Toast } from 'mint-ui'
//请求时的拦截
quest.u(config => {
return config;
}, err => {
Toast('请求超时!' );
solve(err);
})
//响应时的拦截
spon.u(data => {
// 返回响应时做⼀些处理
// 第⼀种⽅式
const data = respon.data
// 根据返回的code值来做不同的处理（和后端约定）
国际英文switch (de) {
ca '0':
// 举例
/
/ exp: 修复iPhone 6+ 微信点击返回出现页⾯空⽩的问题
if (isIOS()) {
// 异步以保证数据已渲染到页⾯上
tTimeout(() => {
// 通过滚动强制浏览器进⾏页⾯重绘
document.body.scrollTop += 1
}, 0)
}
// 这⼀步保证数据返回，如果没有return则会⾛接下来的代码，不是未登录就是报错
return data
// 需要重新登录
ca 'SHIRO_E5001':
// 微信⽣产环境下授权登录
if (isWeChat() && IS_PRODUCTION) {
在职研究生报考条件<(wechat.authorizeUrl).then(({ result }) => {
})
} el {
// 否则跳转到h5登录并带上跳转路由
const arch = encodeSearchParams({
next: location.href,
})
}
// 不显⽰提⽰消息
非限制性定语从句用什么连接词
data.description = ''
break
default:
}
// 若不是正确的返回code，且已经登录，就抛出错误
const err = new Error(data.description)
err.data = data
/
/ 第⼆种⽅式，我采取的
if (data.status && data.status == 200 && data.data.status == 'error') {
Toast(data.data.msg);
return data;
}
return data;
},err => {
// 当响应异常时做⼀些处理
if (err && spon) {
switch (spon.status) {
ca 400: ssage = '请求错误(400)'; break;
ca 401: ssage = '未授权，请重新登录(401)'; break;
ca 403: ssage = '拒绝访问(403)'; break;
ca 404: ssage = '请求出错(404)'; break;
ca 408: ssage = '请求超时(408)'; break;
ca 500: ssage = '服务器错误(500)'; break;
ca 501: ssage = '服务未实现(501)'; break;
ca 502: ssage = '⽹络错误(502)'; break;
ca 503: ssage = '服务不可⽤(503)'; break;
ca 504: ssage = '⽹络超时(504)'; break;
ca 505: ssage = 'HTTP版本不受⽀持(505)'; break;aver
default: ssage = `连接出错(${spon.status})!`;
}
} el {
}
ssage);
solve(err);
})
//如果需要可以封装⼀些请求的⽅法
let ba = '';
export const postRequest = (url, params) => {
return axios({
method: 'post',
url: `${ba}${url}`,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' }
return ret
漫画书的英文
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
export const uploadFileRequest = (url, params) => {
return axios({
method: 'post',
url: `${ba}${url}`,
data: params,
headers: {
'Content-Type': 'multipart/form-data'
}
});
}
export const putRequest = (url, params) => {
return axios({
method: 'put',
url: `${ba}${url}`,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' }
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
export const deleteRequest = (url) => {
return axios({
method: 'delete',
url: `${ba}${url}`
typhoid fever});
}
export const get = (url,params) => {
return axios({
method: 'get',
url: `${ba}${url}?`,
params: params,
headers:{
'Content-Type': 'application/x-www-form-urlencoded',
'Access-Token': Item("AccessToken")
}
});
}
封装之后的错误信息这个⼤家⼀⽬了然，没啥好说的，唯⼀要说的是当出错的时候我执⾏的是：solve(err);，⽽不是ject(err);
这是什么原因呢？因为封装axios⼀个重要的⽬的就是希望能够对错误进⾏统⼀处理，不⽤在每⼀次发起⽹络请求的时候都去处理各种异常情况，将所有的异常情况都在⼯具js中进⾏统⼀的处理。但是这种⽅式也带来⼀个问题，就是我在发起⽹络请求的时候，⼀般都会开启⼀个进度条，当⽹络请求结束时，不论请求成功还是失败，我都要将这个进度条关闭掉，⽽失败的处理我都统⼀写在⼯具js⾥边了，因此就没在请求失败时关闭进度条了，解决这个问题，有两种⽅案：
1.直接在request的拦截器中开启⼀个fullscreen的loading，然后在respon的拦截器中将其关闭，即我将进度条也封装到⼯具js中了，但是⾮常不推荐这种⽅式，因为这种⽅式的⽤户体验⾮常之差，有兴趣的⼩伙伴可以⾃⼰试⼀下就知道了。
2.第⼆种解决⽅案就是⼤家看到的，我返回⼀个solve(err)，则这个请求不会就此结束，错误的message我已经弹出来了，但是这条消息还是会继续传到then中，也就是说，⽆论请求成功还是失败，我在成功的回调中都能收到通知，这样我就可以将loading关闭了，⽐如下⾯这个登录请求：
var _this = this;
this.loading = true;
this.postRequest('/login', {
urname: this.loginForm.urname,
password: this.loginForm.password
}).then(resp=> {
_this.loading = fal;
if (resp && resp.status == 200) {
_Request("/config/hr").then(resp=> {
if (resp && resp.status == 200) {
var data = resp.data;
_this.$it('login', data);
var path = _this.$direct;
_this.$place({path: path == '/' || path == undefined ? '/home' : path});
}therefore
})
}
添加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 上，如下：
Request = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;
如此之后，以后再需要发送⽹络请求，就不需要导⼊api了，直接通过下⾯这种⽅式即可：
iit
Post⽅法：
this.postRequest('/login', {
urname: this.loginForm.urname,
password: this.loginForm.password
}).then(resp=> {
...
}
国字脸男生适合什么发型});
GET⽅法：
_(
this.url_s+"/Notice/findTotalCount",{
Item("urid"),
openId: Item('openId')
}
)
.怎样提升表达能力
then(function(res) {
//
})
以上这篇axios对请求各种异常情况处理的封装⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
