依托 axios 实现全局请求防抖

更新：该方法已过时，新的代替方案是 AbortController ，并且！前端取消请求无法真实取消，原因在于请求发送到服务器后服务器或许已经做了处理，但是前端只是关闭了返回通道，可是实际上服务器已经对该请求做了处理，所以存在风险，不建议在post接口上使用，如需使用建议甩锅后端。

You can also create a cancel token by passing an executor function to the constructor:CancelToken
您还可以通过向构造函数传递执行函数来创建一个取消令牌:CancelToken

简单来说就是用来取消axios的请求方法的。
使用方式：


const CancelToken = axios.CancelToken;
let cancel;axios.get('/user/12345', {cancelToken: new CancelToken(function executor(c) {// An executor function receives a cancel function as a parametercancel = c;})
});// cancel the requestcancel();

最后
全局请求防抖具体代码实现：

let cancelToken= axios.CancelToken;//取消api
let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
let removePending = config => {pending.find((item,i)=>{//判断当前请求数组中是否存在相同请求地址的接口if(item.u===config.url + "&" + config.method){pending[i].c(); //执行取消方法pending.splice(i, 1); //把这条记录从数组中移除return true;}})
};//添加请求拦截器
axios.interceptors.request.use(config => {removePending(config); //在一个ajax发送前执行一下取消操作config.cancelToken = new cancelToken(c => {// 传入对比参数 和 取消方法pending.push({ u: config.url + "&" + config.method, c });});return config;},error => {return Promise.reject(error);}
);//添加响应拦截器
axios.interceptors.response.use(response => {//do something},error => {//因为请求被取消了，响应器中会走错误流程，这里返回一下自定义格式return {data: {code: 666,cancel: true,errorMsg: "请求已关闭"}};}
);

这边还有个优化思路就是在普通项目中还好，碰到带token或者特殊的类似无序参数的请求方法，或者项目特别大的，可能会导致我们的数组的内容长度会特别长，可以尝试在相应中完成请求后删除数组中对应的请求方法，这样的话，我们数组长度就不会越来越长了，但这在小项目中，接口请求不超过四位数，或者没有那种带无序请求参数的话都还是能用的。

依托 axios 实现全局请求防抖相关推荐

Axios的Vue插件（添加全局请求/响应拦截器）
/** * @file Axios的Vue插件(添加全局请求/响应拦截器) */ // https://github.com/mzabriskie/axios import axios from ...
同时多个axios请求_用 React+Antd 封装 Axios 实现全局 Loading 效果
前言今天在做 react 后台管理的时候要实现一个全局 Loading 效果,通常使用 axios 库与后端进行数据交互.为了更好的用户体验,在每次请求前添加一个加载效果,让用户知道在等待加载. 要 ...
axios请求接口http_Vue使用Axios实现http请求以及解决跨域问题
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.Axios的中文文档以及github地址如下: 中文:https://www.kancloud.cn/y ...
axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍
Vue 封装axios(四种请求)及相关介绍首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
axios delete有请求体吗_封装 axios 取消重复请求
编者按:本文作者舒丽琦,奇舞团前端开发工程师在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内 ...
axios 最全请求拦截器响应拦截器配置公共请求头超时时间以及get delete post put 四种请求传参方式
axios 拦截器请求拦截器请求拦截器的作用是在请求发送前进行一些操作例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易响应拦截器响应拦截器的作用是在接收到响应后进行一些操 ...
axios发送网络请求
网络模块封装选择什么网络模块传统的Ajax 缺点:配置和调用方式等非常混乱 jQuery-Ajax 缺点:在Vue整个开发中都是不需要使用jQuery的 axios axios 功能特点: 在浏览 ...
axios库读不到cookie_Vue axios 跨域请求无法带上cookie的解决
Vue axios 跨域请求无法带上cookie的解决在main.js设置 // 携带cookie axios.defaults.withCredentials = true 补充知识:VUE ax ...
vue2.0 axios 登录post请求自动读取Set-Cookie设置
因为axios在登录post请求的时候不会自动读取 Set-Cookie,如图下面的地方先在在全局配置 axios.defaults.withCredentials = true 下载包 cnpm ...

依托 axios 实现全局请求防抖

依托 axios 实现全局请求防抖相关推荐

最新文章

热门文章