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 相关文章推荐
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
BootStrap 导航条实例代码
May 18 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
解决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
php foreach 使用&(与运算符)引用赋值要注意的问题
2010/02/16 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
python开发之for循环操作实例详解
2015/11/12 Python
Python 数据结构之旋转链表
2017/02/25 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Python求解正态分布置信区间教程
2019/11/20 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
Python列表list操作相关知识小结
2020/01/29 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
教师实习自我鉴定
2013/12/18 职场文书
建房协议书
2014/04/11 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
大学生实习推荐信
2015/03/27 职场文书