使用 Axios 取消重复请求_确保以最新请求为准

引言

在移动端应用开发过程中，遇到了一个问题：当用户在短时间内触发了两次相同的请求时，可能会出现以下情况：第一次请求的响应时间较长，而第二次请求的响应时间较短。第二次请求的结果可能会先返回并被渲染到页面上，但随后第一次请求的结果又返回并覆盖了第二次请求的结果，导致页面显示不正确。这种现象会导致用户界面的数据不一致性，影响用户的体验感。

解决方案

使用 cancelToken 来实现取消重复请求的功能。cancelToken 是一个用于取消请求的令牌，当请求被取消时，会抛出一个 cancel 错误。我们可以在请求拦截器中检查是否已经有一个相同的请求在队列中，如果有，则取消之前的请求。

代码实现

import axios from 'axios';

// 创建一个新的 Axios 实例,可以设置一些请求拦截器
 const instance = axios.create();

// 创建一个 Map 来存储取消令牌
const cancelTokenMap = new Map();

instance.interceptors.request.use(config=>{
   const key = `${config.method}-${config.url}`;
   if (cancelTokenMap.has(key)) {
       cancelTokenMap.get(key).cancel('Operation canceled due to new request.');
   }
   // 创建取消令牌
   const cancelToken = axios.CancelToken.source();
   cancelTokenMap.set(key, cancelToken);
   config.cancelToken = cancelToken.token;
   return config;
}, error => {
   return Promise.reject(error);
})