前端网络请求封装

前端采用了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 '':
// 举例
// exp: 修复iPhone 6+ 微信点击返回出现页面空白的问题
if (isIOS()) {
// 异步以保证数据已渲染到页面上
setTimeout(() => {
// 通过滚动强制浏览器进行页面重绘
document.body.scrollTop +=
}, )
}
// 这一步保证数据返回,如果没有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 == && data.data.status == 'error') {
Toast(data.data.msg);
return data;
}
return data;
},err => {
// 当响应异常时做一些处理
if (err && err.response) {
switch (err.response.status) {
case : err.message = '请求错误(400)'; break;
case : err.message = '未授权,请重新登录(401)'; break;
case : err.message = '拒绝访问(403)'; break;
case : err.message = '请求出错(404)'; break;
case : err.message = '请求超时(408)'; break;
case : err.message = '服务器错误(500)'; break;
case : err.message = '服务未实现(501)'; break;
case : err.message = '网络错误(502)'; break;
case : err.message = '服务不可用(503)'; break;
case : err.message = '网络超时(504)'; break;
case : 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 == ) {
_this.getRequest("/config/hr").then(resp=> {
if (resp && resp.status == ) {
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对请求各种异常情况处理的封装的更多相关文章

  1. axios构建请求池处理全局loading状态&&axios避免重复请求

    很多时候我们能够看到类似进度条一样的东西在页面顶部进行加载,代表页面是否加载完成,或者其他的loading效果,我们当然不可能通过promise.all来讲所有的请求合并到一起然后进行处理,这个时候我 ...

  2. Axios 网络请求组件封装 (鉴权、刷新、拦截)

    一.前言 注意:本教程需要你对axios有一定的了解,不适用于小白(只能借鉴,希望你能自己动手),注释都写的很清楚.此封装并非完整版,已进行部分删减修改操作,但仍然适用于大部分业务场景,如果不适用于你 ...

  3. springmvc请求参数异常统一处理,结合钉钉报告信息定位bug位置

    参考之前一篇博客:springmvc请求参数异常统一处理 1.ExceptionHandlerController package com.oy.controller; import java.tex ...

  4. chales抓包,模拟异常情况

    抓包能做什么? 1 .可以抓取客户端和server的请求和返回,可以借助判断是客户端问题是server问题 2.可以模拟各种异常情况用来测试异常情况 3.无接口文档情况下测试接口 怎么修改你抓到的请求 ...

  5. vue中使用axios与axios的请求响应拦截

    VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...

  6. vue axios post请求下载文件,后台springmvc完整代码

     注意请求时要设置responseType,不加会中文乱码,被这个坑困扰了大半天... axios post请求:     download(index,row){         var ts =  ...

  7. 【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题

    [手摸手,带你搭建前后端分离商城系统]02 VUE-CLI 脚手架生成基本项目,axios配置请求.解决跨域问题. 回顾一下上一节我们学习到的内容.已经将一个 usm_admin 后台用户 表的基本增 ...

  8. 异常情况下的Activity生命周期分析

    情况1:资源相关的系统配置发生改变 资源相关的系统配置发生改变,举个栗子.当前Activity处于竖屏状态的时候突然转成横屏,系统配置发生了改变,Activity就会销毁并且重建,其onPause, ...

  9. python3 selenium 如何处理异常情况

    使用场景: 1.元素只有在某一特定情况下才会出现 2.元素定位不到 使用方法: try: except exceptions.NoSuchElementException: 举例说明: # _._ c ...

随机推荐

  1. 第二章、URL与资源

    1 URL统一资源定位符 URL 是浏览器寻找信息时所需的资源位置.通过 URL,人类和应用程序才能找到.使用并共享因特网上大量的数据资源.URL是作为URI的一个子集,URI是一类更通用的资源标识符 ...

  2. 二十三、Linux任务计划及周期性任务执行:at、crontab命令

    一.概述 未来的某时间点执行一次某任务:at, batch周期性运行某任务:crontab 这两个任务的执行结果:会通过邮件发送给用户 (本地终端用户之间的邮件通知) centos 5,6,7默认开启 ...

  3. 使用linux中,最让人无语的是软件源

    使用linux的最大的障碍是软件源的配置和系统的安装,这两个搞定了,坚持使用下去都不是问题,如果实在不行,还可以win10下的linux子系统可以作为基本的使用.下面记录两个软件源: Found 2 ...

  4. 动态连通性问题——算法union-find

    问题定义:问题的输入是一列整数对,其中每个整数都表示一个某种类型的对象,一对整数p,q可以被理解为"p和q是相连的".我们假设“相连”是一种对等的关系. 这也意味着它具有: 1.自 ...

  5. 《梁宁·产品思维30讲》课程学习笔记(内含全套音频+ppt资料

    科技进步.产品迭代.公司演化.组织变迁……不变的是用户的情绪和人性. 那些信奉“用户驱动”的人,从普通人变成了行业大佬,建立了自己的世界.乔布斯.马化腾.马云.雷军.张小龙.周鸿祎.傅盛……这些改变世 ...

  6. linux下docker如何指定容器的工作目录?

    答: 启动容器时传入-w <work_dir>参数即可,如: docker run -it -w <work_dir> <container_image_name> ...

  7. Editplus的运行JAVA的配置

    工具--->参数设置

  8. ajax结合mysql数据库和smarty实现局部数据状态的刷新

    效果状态:通过点击锁定状态实现状态锁定与不锁定之间的切换 1.主程序:01.php导入smarty和mysql类,取得数据导入列表模板 <?php    include './include/M ...

  9. android java.lang.IllegalArgumentException: Comparison method violates its general contract! 问题

    android  java.lang.IllegalArgumentException: Comparison method violates its general contract! 问题 jav ...

  10. PLSQL自动登录,记住用户名密码

    转: PLSQL自动登录,记住用户名密码&日常使用技巧 配置启动时的登录用户名和密码 这是个有争议的功能,因为记住密码会给带来数据安全的问题. 但假如是开发用的库,密码甚至可以和用户名相同,每 ...