axios对请求各种异常情况处理的封装方法


Posted in Javascript onSeptember 25, 2018

前端采用了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;
 }
 return data;
},err => {
 // 当响应异常时做一些处理
 if (err && err.response) {
  switch (err.response.status) {
   case 400: err.message = '请求错误(400)'; break;
   case 401: err.message = '未授权,请重新登录(401)'; break;
   case 403: err.message = '拒绝访问(403)'; break;
   case 404: err.message = '请求出错(404)'; break;
   case 408: err.message = '请求超时(408)'; break;
   case 500: err.message = '服务器错误(500)'; break;
   case 501: err.message = '服务未实现(501)'; break;
   case 502: err.message = '网络错误(502)'; break;
   case 503: err.message = '服务不可用(503)'; break;
   case 504: err.message = '网络超时(504)'; break;
   case 505: err.message = 'HTTP版本不受支持(505)'; break;
   default: err.message = `连接出错(${err.response.status})!`;
  }
 } else {
  err.message = '连接服务器失败!'
 }
 Toast(err.message);
 return Promise.resolve(err);
})

//如果需要可以封装一些请求的方法
let base = '';

export const postRequest = (url, params) => {
 return axios({
  method: 'post',
  url: `${base}${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: `${base}${url}`,
  data: params,
  headers: {
   'Content-Type': 'multipart/form-data'
  }
 });
}
export const putRequest = (url, params) => {
 return axios({
  method: 'put',
  url: `${base}${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: `${base}${url}`
 });
}
export const get = (url,params) => {
 return axios({
  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) {
  var data = resp.data;
  _this.$store.commit('login', data);
  var path = _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对请求各种异常情况处理的封装方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
xtree.js 代码
Mar 13 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
解决vue axios的封装 请求状态的错误提示问题
Sep 25 #Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 #Javascript
Vue高版本中一些新特性的使用详解
Sep 25 #Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 #Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 #Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 #Javascript
Vue页面跳转动画效果的实现方法
Sep 23 #Javascript
You might like
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
PHPMailer 中文使用说明小结
2010/01/22 PHP
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
python的unittest测试类代码实例
2017/12/07 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
Django自定义manage命令实例代码
2018/02/11 Python
python复制文件到指定目录的实例
2018/04/27 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
补充协议书
2015/01/28 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书