聊聊Axios 如何取消重复请求？

时间：2022-06-02 05:15:17

聊聊Axios 如何取消重复请求？

在 Web 项目开发过程中，我们经常会遇到重复请求的场景，如果系统不对重复的请求进行处理，则可能会导致系统出现各种问题。比如重复的 post 请求可能会导致服务端产生两笔记录。那么重复请求是如何产生的呢?这里我们举 2 个常见的场景：

  • 假设页面中有一个按钮，用户点击按钮后会发起一个 AJAX 请求。如果未对该按钮进行控制，当用户快速点击按钮时，则会发出重复请求。
  • 假设在考试结果查询页面中，用户可以根据 “已通过”、“未通过” 和 “全部” 3 种查询条件来查询考试结果。如果请求的响应比较慢，当用户在不同的查询条件之前快速切换时，就会产生重复请求。

既然已经知道重复请求是如何产生的，也知道了它会带来一些问题。接下来，阿宝哥将以 Axios 为例，带大家来一起解决重复请求的问题。

一、如何取消请求

 

Axios 是一个基于 Promise 的 HTTP 客户端，同时支持浏览器和 Node.js 环境。它是一个优秀的 HTTP 客户端，被广泛地应用在大量的 Web 项目中。对于浏览器环境来说，Axios 底层是利用 XMLHttpRequest 对象来发起 HTTP 请求。如果要取消请求的话，我们可以通过调用 XMLHttpRequest 对象上的 abort 方法来取消请求：

  1. let xhr = new XMLHttpRequest(); 
  2. xhr.open("GET", "https://developer.mozilla.org/", true); 
  3. xhr.send(); 
  4. setTimeout(() => xhr.abort(), 300); 

而对于 Axios 来说，我们可以通过 Axios 内部提供的 CancelToken 来取消请求：

  1. const CancelToken = axios.CancelToken; 
  2. const source = CancelToken.source(); 
  3.  
  4. axios.post('/user/12345', { 
  5.   name: 'semlinker' 
  6. }, { 
  7.   cancelToken: source.token 
  8. }) 
  9.  
  10. source.cancel('Operation canceled by the user.'); // 取消请求，参数是可选的 

此外，你也可以通过调用 CancelToken 的构造函数来创建 CancelToken，具体如下所示：

  1. const CancelToken = axios.CancelToken; 
  2. let cancel; 
  3.  
  4. axios.get('/user/12345', { 
  5.   cancelToken: new CancelToken(function executor(c) { 
  6.     cancel = c; 
  7.   }) 
  8. }); 
  9.  
  10. cancel(); // 取消请求 

现在我们已经知道在 Axios 中如何使用 CancelToken 来取消请求了，那么 CancelToken内部是如何工作的呢?这里我们先记住这个问题，后面阿宝哥将为你们揭开 CancelToken背后的秘密。接下来，我们来分析一下如何判断重复请求。

二、如何判断重复请求当请求

 

方式、请求 URL 地址和请求参数都一样时，我们就可以认为请求是一样的。因此在每次发起请求时，我们就可以根据当前请求的请求方式、请求 URL 地址和请求参数来生成一个唯一的 key，同时为每个请求创建一个专属的 CancelToken，然后把 key 和 cancel 函数以键值对的形式保存到 Map 对象中，使用 Map 的好处是可以快速的判断是否有重复的请求：

  1. import qs from 'qs' 
  2.  
  3. const pendingRequest = new Map(); 
  4. // GET -> params；POST -> data 
  5. const requestKey = [method, url, qs.stringify(params), qs.stringify(data)].join('&');  
  6. const cancelToken = new CancelToken(function executor(cancel) { 
  7.   if(!pendingRequest.has(requestKey)){ 
  8.     pendingRequest.set(requestKey, cancel); 
  9.   } 
  10. }) 

当出现重复请求的时候，我们就可以使用 cancel 函数来取消前面已经发出的请求，在取消请求之后，我们还需要把取消的请求从 pendingRequest 中移除。现在我们已经知道如何取消请求和如何判断重复请求，下面我们来介绍如何取消重复请求。

三、如何取消重复请求

 

因为我们需要对所有的请求都进行处理，所以我们可以考虑使用 Axios 的拦截器机制来实现取消重复请求的功能。Axios 为开发者提供了请求拦截器和响应拦截器，它们的作用如下：

  • 请求拦截器：该类拦截器的作用是在请求发送前统一执行某些操作，比如在请求头中添加 token 字段。
  • 响应拦截器：该类拦截器的作用是在接收到服务器响应后统一执行某些操作，比如发现响应状态码为 401 时，自动跳转到登录页。

3.1 定义辅助函数

 

在配置请求拦截器和响应拦截器前，阿宝哥先来定义 3 个辅助函数：

generateReqKey：用于根据当前请求的信息，生成请求 Key;

  1. function generateReqKey(config) { 
  2.   const { method, url, params, data } = config; 
  3.   return [method, url, Qs.stringify(params), Qs.stringify(data)].join("&"); 
  4. } 

addPendingRequest：用于把当前请求信息添加到pendingRequest对象中;

  1. const pendingRequest = new Map(); 
  2. function addPendingRequest(config) { 
  3.   const requestKey = generateReqKey(config); 
  4.   config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => { 
  5.     if (!pendingRequest.has(requestKey)) { 
  6.        pendingRequest.set(requestKey, cancel); 
  7.     } 
  8.   }); 
  9. } 

removePendingRequest：检查是否存在重复请求，若存在则取消已发的请求。

  1. function removePendingRequest(config) { 
  2.   const requestKey = generateReqKey(config); 
  3.   if (pendingRequest.has(requestKey)) { 
  4.      const cancelToken = pendingRequest.get(requestKey); 
  5.      cancelToken(requestKey); 
  6.      pendingRequest.delete(requestKey); 
  7.   } 
  8. } 

创建好 generateReqKey、addPendingRequest 和 removePendingRequest 函数之后，我们就可以设置请求拦截器和响应拦截器了。

3.2 设置请求拦截器

 

  1. axios.interceptors.request.use( 
  2.   function (config) { 
  3.     removePendingRequest(config); // 检查是否存在重复请求，若存在则取消已发的请求 
  4.     addPendingRequest(config); // 把当前请求信息添加到pendingRequest对象中 
  5.     return config; 
  6.   }, 
  7.   (error) => { 
  8.      return Promise.reject(error); 
  9.   } 
  10. ); 

3.3 设置响应拦截器

 

  1. axios.interceptors.response.use( 
  2.   (response) => { 
  3.      removePendingRequest(response.config); // 从pendingRequest对象中移除请求 
  4.      return response; 
  5.    }, 
  6.    (error) => { 
  7.       removePendingRequest(error.config || {}); // 从pendingRequest对象中移除请求 
  8.       if (axios.isCancel(error)) { 
  9.         console.log("已取消的重复请求：" + error.message); 
  10.       } else { 
  11.         // 添加异常处理 
  12.       } 
  13.       return Promise.reject(error); 
  14.    } 
  15. ); 

由于完整的示例代码内容比较多，阿宝哥就不放具体的代码了。感兴趣的小伙伴，可以访问以下地址浏览示例代码。

  1. 完整的示例代码：https://gist.github.com/semlinker/e426780664f0186db434882f1e27ac3a 

这里我们来看一下 Axios 取消重复请求示例的运行结果：

聊聊Axios 如何取消重复请求？

从上图可知，当出现重复请求时，之前已发送且未完成的请求会被取消掉。下面我们用一张流程图来总结一下取消重复请求的处理流程：

 聊聊Axios 如何取消重复请求？

最后，我们来回答前面留下的问题，即 CancelToken 内部是如何工作的?

四、CancelToken 的工作原理

 

在前面的示例中，我们是通过调用 CancelToken 构造函数来创建 CancelToken 对象：

  1. new axios.CancelToken((cancel) => { 
  2.   if (!pendingRequest.has(requestKey)) { 
  3.     pendingRequest.set(requestKey, cancel); 
  4.   } 
  5. }) 

所以接下来，我们来分析 CancelToken 构造函数，该函数被定义在 lib/cancel/CancelToken.js 文件中：

  1. // lib/cancel/CancelToken.js 
  2. function CancelToken(executor) { 
  3.   if (typeof executor !== 'function') { 
  4.     throw new TypeError('executor must be a function.'); 
  5.   } 
  6.  
  7.   var resolvePromise; 
  8.   this.promise = new Promise(function promiseExecutor(resolve) { 
  9.     resolvePromise = resolve; 
  10.   }); 
  11.  
  12.   var token = this; 
  13.   executor(function cancel(message) { // 设置cancel对象 
  14.     if (token.reason) { 
  15.       return; // Cancellation has already been requested 
  16.     } 
  17.     token.reason = new Cancel(message); 
  18.     resolvePromise(token.reason); 
  19.   }); 
  20. } 

由以上代码可知，cancel 对象是一个函数，当我们调用该函数后，会创建 Cancel 对象并调用 resolvePromise 方法。该方法执行后，CancelToken 对象上 promise 属性所指向的 promise 对象的状态将变为 resolved。那么这样做的目的是什么呢?这里我们从 lib/adapters/xhr.js 文件中找到了答案：

  1. // lib/adapters/xhr.js  
  2. if (config.cancelToken) { 
  3.   config.cancelToken.promise.then(function onCanceled(cancel) { 
  4.     if (!request) { return; } 
  5.     request.abort(); // 取消请求 
  6.     reject(cancel); 
  7.     request = null; 
  8.   }); 
  9. } 

看完上述的内容，可能有的小伙伴还不是很能理解 CancelToken 的工作原理，所以阿宝哥又画了一张图来帮助大家理解 CancelToken 的工作原理：

 聊聊Axios 如何取消重复请求？

五、总结

 

本文介绍了在 Axios 中如何取消重复请求及 CancelToken 的工作原理，在后续的文章中，阿宝哥将会介绍在 Axios 中如何设置数据缓存，感兴趣的小伙伴不要错过哟。如果你想了解 Axios 中 HTTP 拦截器及 HTTP 适配器的设计与实现，可以阅读 77.9K 的 Axios 项目有哪些值得借鉴的地方 这篇文章。

六、参考资源

 

  • Github - Axios
  • MDN - XMLHttpRequest
  • 77.9K 的 Axios 项目有哪些值得借鉴的地方

原文地址：https://mp.weixin.qq.com/s/By-iXlONjSZLKFG2Xd7rpg

标签：

相关文章