axios对请求各种异常情况处理的封装方法对请求各种异常情况处理的封装方法
前端采用了axios来处理网络请求，为了避免在每次请求时都去判断各种各样的网络情况，比如连接超时、服务器内部错误、
权限不足等等不一而足，我对axios进行了简单的封装，这里主要使用了axios中的拦截器功能。
封装后的网络请求工具封装后的网络请求工具js如下如下
import axios from 'axios'
import { Toast } from 'mint-ui'
//请求时的拦截
axios.interceptors.request.use(config => {
return config;
}, err => {
Toast('请求超时!' );
return Promise.resolve(err);
})
//响应时的拦截
axios.interceptors.response.use(data => {
// 返回响应时做一些处理
// 第一种方式
const data = response.data
// 根据返回的code值来做不同的处理（和后端约定）
switch (data.code) {
case '0':
// 举例
// exp: 修复iPhone 6+ 微信点击返回出现页面空白的问题
if (isIOS()) {
// 异步以保证数据已渲染到页面上
setTimeout(() => {
// 通过滚动强制浏览器进行页面重绘
document.body.scrollTop += 1
}, 0)
}
// 这一步保证数据返回，如果没有return则会走接下来的代码，不是未登录就是报错
return data
// 需要重新登录
case 'SHIRO_E5001':
// 微信生产环境下授权登录
if (isWeChat() && IS_PRODUCTION) {
axios.get(apis.common.wechat.authorizeUrl).then(({ result }) => {
location.replace(global.decodeURIComponent(result))
})
} else {
// 否则跳转到h5登录并带上跳转路由
const search = encodeSearchParams({
next: location.href,
})
location.replace(`/user/login?${search}`)
}
// 不显示提示消息
data.description = ''
break
default:
}
// 若不是正确的返回code，且已经登录，就抛出错误
const err = new Error(data.description)
err.data = data
err.response = response
// 第二种方式，我采取的
if (data.status && data.status == 200 && data.data.status == 'error') {
Toast(data.data.msg);
return data;
}
资源评论
weixin_38595356
- 粉丝: 9
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
