vue axios * 常用之重复请求取消

引言

上一篇介绍了axios的简单封装，知道了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 request
cancel();

可以看到上面都是在单个请求中创建的 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 = 30000
axios.defaults.baseURL = baseURL.target

// 添加请求 *
axios.interceptors.request.use(function(config) {
 // 在发送请求之前做些什么
 config.headers = {
     'content-type': 'application/json',
     'token': getToken()
 }
 // 获取请求key
 let requestKey = getReqKey(config);

// 判断是否是重复请求
 if (pendingRequest.has(requestKey)) { // 是重复请求
   removeReqKey(requestKey); // 取消
 }else{
   // 设置cancelToken
   config.cancelToken = new CancelToken(function executor(cancel) {
     pendingRequest.set(requestKey, cancel); // 设置
   })
 }

return config;
}, function (error) {
 // 请求错误
 return Promise.reject(error);
});

// 添加响应 *
axios.interceptors.response.use(function (response) {
 // 请求对象中删除requestKey
 let 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);
});

// 获取请求key
function getReqKey(config) {
 // 请求方式、请求地址、请求参数生成的字符串来作为是否重复请求的依据
 const { method, url, params, data } = config; // 解构出来这些参数
 // GET ---> params  POST ---> data
 const 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
}

来源：https://juejin.cn/post/7004721390767046686