需求

  1. 封装常用请求
  2. 拦截器-请求锁
  3. 统一处理错误码

一、封装常用的请求

  解决痛点:不要每一个模块的api都还要写get,post,patch请求方法。直接将这些常用的方法封装好。

  解决方案:写一个类,封装好常用的请求

  部分源码如下

export default class PublicAPI {
constructor(url) {
this.url = url;
} get(params, filter) {
if (Array.isArray(params)) {
filter = typeof filter === 'object' ? JSON.stringify(filter) : filter;
let qs = filter ? '?filter=' + filter : '';
return axios.get(this.url + '/' + params.join('/') + qs);
}
params = params || {};
return axios.get(this.url, { params });
} delete(id) {
return axios.delete(`${this.url}/${id}`);
} post(params) {
return axios.post(this.url, params);
}
   //常用请求 都可以封装在这里
}

二、拦截器-请求锁

  解决痛点:限制同一时间发多个同一个请求

  解决方案:利用axios的拦截器 + axios.CancelToken,限制同一个请求多次发送

  源码如下

方案一:简单款

let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
let CancelToken = axios.CancelToken;
let removePending = (config) => {
for(let p in pending){
if(pending[p].u === config.url + '&' + config.method) { //当前请求在数组中存在时执行函数体
pending[p].f(); //执行取消操作
pending.splice(p, 1); //把这条记录从数组中移除
}
}
}

方案二:复杂款(这个是在掘金上看到的,原链接找不到了)

let pending = {};
/**
* cancelKey管理器
*
* @return {Object} 返回一个对象,对象暴露两个方法,一个可以获取本次请求的key,一个是设置本次请求的key
* @memberof HttpRequest
*/
let cancelKeyManager = () => {
const expose = {};
expose.setKey = function setKey(config) {
const { method, url, params, data } = config;
expose.key = `${method}|${url}`;
//expose.key = method === 'get' ? `${expose.key}&${JSON.stringify(params)}` : `${expose.key}&${JSON.stringify(data||{})}`;
};
expose.getKey = function getKey() {
return expose.key;
};
return expose;
}; /**
*处理请求拦截和请求取消
*
* @param {object} config axios配置对象
* @param {boolean} [isCancel=true] 标识是请求取消还是拦截请求
* @return {object} 返回axios配置对象
* @memberof HttpRequest
*/
let handleRequestCancel = (config, isCancel = false) => {
// 设置本次请求的key
const { setKey, getKey } = cancelKeyManager();
setKey(config);
const key = getKey();
const CancelToken = axios.CancelToken;
// 取消已经发出去的请求
if (isCancel) {
removeRequest(key, true);
// 设置本次请求的cancelToken
config.cancelToken = new CancelToken(c => {
pending[key] = c;
});
} else {
// 拦截本次请求
config.cancelToken = new CancelToken(c => {
// 将本次的cancel函数传进去
pending[key] = c;
removeRequest(key, true, c);
});
} return config;
}; /**
* 移除请求
*
* @param {string} key 标识请求的key
* @param {boolean} [isRequest=false] 标识当前函数在请求拦截器调用还是响应拦截器调用
* @param {function} c cancel函数
* @memberof HttpRequest
*/
let removeRequest = (key, isRequest = false, c) =>{
// 请求前先判断当前请求是否在pending中,如果存在有两种情况:
// 1. 上次请求还未响应,本次的请求被判为重复请求,则调用cancel方法拦截本次重复请求或者取消上一个请求
// 2. 上次请求已经响应,在response中被调用,清除key
console.log(key,pending);
if (pending[key]) {
if (isRequest) {
Message.error({
message: '请求过于频繁'
});
} else {
// 上一次请求在成功响应后调用cancel函数删除key
delete pending[key];
}
}
};

三、统一处理错误码

  解决痛点:每个请求都需要处理错误信息,特别是一些常用的错误(坚持能封装就封装的思想),当然具体业务处理逻辑这是各自处理啦!

  解决方案:用axios拦截器,将返回来的错误统一处理,最常用的就是401 token失效吧!一般是要前后端统一错误码的,固定的错误码做固定的事情!

  部分源码如下(感觉只适合部分)

axios.interceptors.response.use(
response => {
return new Promise((resolve, reject) => { //很重要 用promise 接收自定义错误码
let data = response.data;
if (data.code === 'ok') {
return resolve({
data: data.data || data || {},
response: response
});
} else {
switch (data.code) {
case '10500': //自定义code
reject({
response: {
code: '10500',
status: 500,
msg: data.msg
}
});
break;
default:
reject(response);
}
}
});
},error => {}
)

总结

  给出的源码比较分散,仅提供思路。

  在项目中这么一套全家桶用下来,十分巴适~~~

  有疑问可以给我留言,我会尽力解答哦

vue+axois 封装请求+拦截器(请求锁+统一错误)的更多相关文章

  1. axios源码解析 - 请求拦截器

    axios请求拦截器,也就是在请求发送之前执行自定义的函数. axios源码版本 - ^0.27.2 (源码是精简版) 平时在业务中会这样去写请求拦截器,代码如下: // 创建一个新的实例 var s ...

  2. Vue添加请求拦截器

    一.现象 统一处理错误及配置请求信息 二.解决 1.安装 axios  , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ...

  3. 细说vue axios登录请求拦截器

    当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cn ...

  4. vue 路由拦截器和请求拦截器

    路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path=='/login' || localStorage.getItem('to ...

  5. Feign 请求拦截器和日志

    Feign 支持请求拦截器,在发送请求前,可以对发送的模板进行操作,例如设置请求头等属性,自定请求拦截器需要实现 feign.RequestInterceptor 接口,该接口的方法 apply 有参 ...

  6. 实现Feign请求拦截器,对请求header等参数进行转发

    参考:Feign传递请求头信息(Finchley版本) 问题:通过Feign远程调用服务,无法传递header参数. 解决方式:实现RequestInterceptor接口(对所有的Feign请求进行 ...

  7. http request 请求拦截器,有token值则配置上token值

    // http request 请求拦截器,有token值则配置上token值 axios.interceptors.request.use( config => { if (token) { ...

  8. axios封装的拦截器的应用

    axios拦截器   页面发送http请求,很多情况我们要对请求和其响应进行特定的处理:如果请求数非常多,单独对每一个请求进行处理会变得非常麻烦,程序的优雅性也会大打折扣.好在强大的axios为开发者 ...

  9. (vue.js)axios interceptors 拦截器中添加headers 属性

    (vue.js)axios interceptors 拦截器中添加headers 属性:http://www.codes51.com/itwd/4282111.html 问题: (vue.js)axi ...

随机推荐

  1. LeetCode 中等题解(4)

    40 组合总和 II Question 给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates ...

  2. 深度解析:如何替换掉代码中的ifelse,我女朋友看完都会了!

    平时我们在写代码时,需要针对不同情况处理不同的业务逻辑,用得最多的就是if和else. 但是如果情况太多,就会出现一大堆的"if else",这就是为什么很多遗留系统中,一个函数可 ...

  3. 这个厉害了,阿里P7大佬都在看的SpringCloud 总结,帮你梳理全部知识点!

    微服务 微服务架构是一种以一些微服务来替代开发单个大而全应用的方法,每一个小服务运行在自己的进程里,并以轻量级的机制来通信, 通常是 HTTP RESTful API.微服务强调小快灵, 任何一个相对 ...

  4. python3处理csv文件

    1. 基础语句 1.1 文件的读取 如果需要读取一行数据如下表1所示,那么需要读取域名下面的数据,便使用如下代码: with open('A.csv','rb') as csvfile: reader ...

  5. Jenkins中如何自定义构造结果

    jenkis中的触发邮件机制是根据构建成功与否来发邮件,实际上我们在jenkis上定时执行脚本时是需要根据用例的执行结果来触发邮件预警 本文讲叙如何根据用例的执行结果来触发邮件预警 1.在任务配置的b ...

  6. 怎样安装Arch Linux以及Deepin桌面环境

    一.概述 Arch Linux 是一个轻量级的Linux发行版本,实际上,Arch Linux提供给用户很多选择,用户可以自定义自己的安装过程,不x像其他很多的Linux发行版本,安装过程甚至是一个只 ...

  7. 败家玩意儿!Redis 竟然浪费了这么多内存!

    作为内存数据库,内存空间大小对于 Redis 来说是至关重要的.内存越多,意味着存储的数据也会越多.但是不知道你有没有遇到过这样的情况,明明空间很大,但是内存的使用却不是很理想. 为什么会出现这样的情 ...

  8. mininet + opendaylight环境配置

    环境配置 ubuntu18.04 镜像 mininet2.2.2 apt-get install mininet 但这种安装只是TLS版本的mininet,与最新版本在功能上有所差距. 控制器(ope ...

  9. CSP2020复赛游记

    CSP2020复赛游记 由于本蒟蒻侥幸通过PJ和TG的分数线并且侥幸的拿了一等,所以侥幸的来参加复赛 11.04~11.05 期中考,挂 11.06 对答案,炸 11.07 开始了第一次CSP复赛 坐 ...

  10. 网络拓扑实例10:MSTP+VRRP组合组网

    组网图形 MSTP+VRRP组合简介 网络中部署VRRP负载分担时,多台设备同时承担业务,每个虚拟设备都包括一个Master设备和若干个Backup设备.如果为了接入备份需要同时部署冗余链路,则需要部 ...