【接口重复请求】axios通过AbortController解决页面切换过快，接口重复请求问题

处理网络请求时，我们经常会遇到需要中途取消请求的情况，比如用户在两个tab之间反复横跳的场景，如果每个接口都从头请求到结束，那必然会造成很大的服务压力。

AbortController是一个Web API，它提供了一个信号对象（AbortSignal），该对象可以用来取消与Fetch API相关的操作。当我们创建AbortController实例时，会自动生成一个与之关联的AbortSignal对象。我们可以将这个AbortSignal对象作为参数传递给fetch函数，从而实现对网络请求的取消控制。

import axios from 'axios'
import QS from 'qs'//引入qs模块，用来序列化post类型的数据// 创建map存储未返回response的接口请求
const pendingRequests = new Map();const generateRequestKey = (config) => {// 处理请求数据，确保请求和响应时一致,response返回的config中可能存在序列化的data，需要转换成json格式，否则生成的key不一致const normalizeData = (data) => {if (typeof data === 'string') {try {return JSON.parse(data);} catch {return data;}}return data;};return [config.method,config.url,JSON.stringify(normalizeData(config.params) || {}),JSON.stringify(normalizeData(config.data) || {})].join('|');};axios.defaults.baseURL = '/';
axios.defaults.timeout = 10000;
axios.defaults.headers.post['Content-Type'] = 'application/json';
// 如果需要跨域，可以设置withCredentials为true
axios.defaults.withCredentials = true; // 允许跨域请求时发送cookies// 创建axios实例
const service = axios.create({baseURL: '/api', // api的base_urltimeout: 10000,// 请求超时时间headers: {'Access-Control-Allow-Origin': '*','strict-origin-when-cross-origin': '*','Cache-Control': 'no-cache','Content-Type': 'application/x-www-form-urlencoded','userRole': 'WEB','Accept-Language': i18n.locale || localStorage.getItem('Accept-Language')}
});// 请求拦截器
service.interceptors.request.use(config => {config.headers['nh-token'] = localStorage.getItem('NH_TOKEN') || ""const token = localStorage.getItem('newToken') || ""if (token) config.headers['Authorization'] = 'Bearer ' + token // 新服务添加token// 生成请求key，用于取消重复的相同请求const requestKey = generateRequestKey(config, 'service.interceptors.request');// 如果存在相同请求，取消前一个if (pendingRequests.has(requestKey)) {const abortController = pendingRequests.get(requestKey);abortController.abort();}// 为当前请求创建新的控制器const controller = new AbortController();config.signal = controller.signal;pendingRequests.set(requestKey, controller);return config;
},error => {return Promise.error(error);})
// 响应拦截器
service.interceptors.response.use(response => {const requestKey = generateRequestKey(response.config, 'service.interceptors.response');pendingRequests.delete(requestKey);// console.log('Response=>', response.request.responseURL, response  );if (response.status === 200) {//result  0-正常  1-异常  10000-未登录 4000-系统异常if (response.data.result == 10000) {// 登录失败，跳转到首页，重新登录router.push({ path: '/login' })return Promise.resolve(response.data)} else {return Promise.resolve(response.data)}} else {return Promise.reject(response);}},error => {if (error.name === 'AbortError') {console.log('请求已被取消:', error.message);}// 取消请求时，不执行这里的代码const requestKey = generateRequestKey(error.config || {});pendingRequests.delete(requestKey);if (error.status) {return Promise.reject(error.response);}})
export default service

在接口封装层按照如上进行，可以满足接口重复请求时，取消重复的操作。需要注意一点，config.data，从request层获取的是Object，但是从response层获取的是一个JSON化的String。所以通过normalizeData方法，进行数据解析，防止map找不到。