学习笔记axios-取消重复请求避免多次提交相同接口

import axios from 'axios';

// generateReqKey：用于根据当前请求的信息，生成请求 Key；
function generateReqKey(config) {
  const { method, url, data, params } = config;
  return [method, url, qs.stringify(data), qs.stringify(params)].join('&');
}

// addPendingRequest：用于把当前请求信息添加到 pendingRequest 对象中；
const penddingRequest = new Map();
function addPendingRequest(config) {
  const requestKey = generateReqKey(config);
  config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
    if (!penddingRequest.has(requestKey)) {
      penddingRequest.set(requestKey, cancel);
    }
  });
}

// removePendingRequest：检查是否存在重复请求，若存在则取消已发的请求。
function removePendingRequest(config) {
  const requestKey = generateReqKey(config);
  if (penddingRequest.has(requestKey)) {
    const cancelToken = penddingRequest.get(requestKey);
    cancelToken(requestKey);
    penddingRequest.delete(requestKey);
  }
}

let instance = axios.create();
instance.interceptors.request.use(config => {
	removePendingRequest(config ); // 检查是否存在重复请求，若存在则取消已发的请求
 	addPendingRequest(config ); // 把当前请求信息添加到pendingRequest对象中
 	const token = "xxx";  // 在vuex里面保存的token
    if(token) {
       // 存在token时则在请求头headers里加入token
       // X-Token为自定义字段，根据后端的规定来定义
       config.headers["X-Token"] = token
     }
 	return config
})

instance.interceptors.response.use(response => {
	removePendingRequest(responseError.config); // 请求成功，移除该请求
	if(response.data.code === 200){
		return response;
	}
})

参考：
https://www.qy.cn/jszx/detail/5475.html