vue|vue axios拦截器常用之重复请求取消 vueaxios拦截器常用之重复请求取

引言上一篇介绍了axios的简单封装，知道了axios拦截器的应用场景和方法，今天来看一下对于响应时间过长且请求次数过高的情况拦截器如何处理。
取消请求的方法

【vue|vue axios拦截器常用之重复请求取消】Axios使用内部提供的CancelToken来取消请求

官网示例1：用CancelToken.source工厂方法创建 cancel token，像这样

const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/user/12345', {cancelToken: source.token}).catch(function(thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message); } else {// 处理错误}}); axios.post('/user/12345', {name: 'new name'}, {cancelToken: source.token})// 取消请求（message 参数是可选的）source.cancel('Operation canceled by the user.');

官网示例2：通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：

const CancelToken = axios.CancelToken; let cancel; axios.get('/user/12345', {cancelToken: new CancelToken(function executor(c) {// executor 函数接收一个 cancel 函数作为参数cancel = c; })}); // cancel the requestcancel();

可以看到上面都是在单个请求中创建的 cancel token 实际工作中我们需要对所有的请求都进行处理，接下来我们看下如何在拦截器实现取消请求的功能
拦截器中取消重复请求

import axios from 'axios'import baseURL from './config'import qs from 'qs'const pendingRequest = new Map(); // 请求对象const CancelToken = axios.CancelToken; axios.defaults.timeout = 30000axios.defaults.baseURL = baseURL.target// 添加请求拦截器axios.interceptors.request.use(function(config) {// 在发送请求之前做些什么config.headers = {'content-type': 'application/json','token': getToken()}// 获取请求keylet requestKey = getReqKey(config); // 判断是否是重复请求if (pendingRequest.has(requestKey)) { // 是重复请求removeReqKey(requestKey); // 取消}else{// 设置cancelTokenconfig.cancelToken = new CancelToken(function executor(cancel) {pendingRequest.set(requestKey, cancel); // 设置})}return config; }, function (error) {// 请求错误return Promise.reject(error); }); // 添加响应拦截器axios.interceptors.response.use(function (response) {// 请求对象中删除requestKeylet requestKey = getReqKey(response.config); removeReqKey(requestKey); // 对返回数据做点啥比如状态进行拦截if (response.data.status !== 200) {Toast({message: response.data.message,type: 'warning',duration: 1000})return}// 没问题返回服务器数据return response.data; }, function (error) {let requestKey = getReqKey(error.config); removeReqKey(requestKey); // 响应错误return Promise.reject(error); }); // 获取请求keyfunction getReqKey(config) {// 请求方式、请求地址、请求参数生成的字符串来作为是否重复请求的依据const { method, url, params, data } = config; // 解构出来这些参数// GET ---> paramsPOST ---> dataconst requestKey =[ method, url, qs.stringify(params), qs.stringify(data)].join('&'); return requestKey; }// 取消重复请求function removeReqKey(key) {const cancelToken = pendingRequest.get(key); cancelToken(key); // 取消之前发送的请求pendingRequest.delete(key); // 请求对象中删除requestKey}

结语以上就是对重复请求的处理，如果对拦截器不清楚的可以看下上篇文章，有问题欢迎大家提出指正，我会在第一时间更新。
到此这篇关于vue axios拦截器常用之重复请求取消的文章就介绍到这了,更多相关axios拦截器重复请求取消内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！