日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
聊聊Axios如何取消重復請求？

在 Web 項目開發(fā)過程中，我們經(jīng)常會遇到重復請求的場景，如果系統(tǒng)不對重復的請求進行處理，則可能會導致系統(tǒng)出現(xiàn)各種問題。比如重復的 post 請求可能會導致服務端產(chǎn)生兩筆記錄。那么重復請求是如何產(chǎn)生的呢?這里我們舉 2 個常見的場景：

專注于為中小企業(yè)提供成都網(wǎng)站設計、成都做網(wǎng)站服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)康縣免費做網(wǎng)站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉變。

  • 假設頁面中有一個按鈕，用戶點擊按鈕后會發(fā)起一個 AJAX 請求。如果未對該按鈕進行控制，當用戶快速點擊按鈕時，則會發(fā)出重復請求。
  • 假設在考試結果查詢頁面中，用戶可以根據(jù) “已通過”、“未通過” 和 “全部” 3 種查詢條件來查詢考試結果。如果請求的響應比較慢，當用戶在不同的查詢條件之前快速切換時，就會產(chǎn)生重復請求。

既然已經(jīng)知道重復請求是如何產(chǎn)生的，也知道了它會帶來一些問題。接下來，阿寶哥將以 Axios 為例，帶大家來一起解決重復請求的問題。

一、如何取消請求

Axios 是一個基于 Promise 的 HTTP 客戶端，同時支持瀏覽器和 Node.js 環(huán)境。它是一個優(yōu)秀的 HTTP 客戶端，被廣泛地應用在大量的 Web 項目中。對于瀏覽器環(huán)境來說，Axios 底層是利用 XMLHttpRequest 對象來發(fā)起 HTTP 請求。如果要取消請求的話，我們可以通過調用 XMLHttpRequest 對象上的 abort 方法來取消請求：

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

而對于 Axios 來說，我們可以通過 Axios 內(nèi)部提供的 CancelToken 來取消請求：

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

此外，你也可以通過調用 CancelToken 的構造函數(shù)來創(chuàng)建 CancelToken，具體如下所示：

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

現(xiàn)在我們已經(jīng)知道在 Axios 中如何使用 CancelToken 來取消請求了，那么 CancelToken內(nèi)部是如何工作的呢?這里我們先記住這個問題，后面阿寶哥將為你們揭開 CancelToken背后的秘密。接下來，我們來分析一下如何判斷重復請求。

二、如何判斷重復請求當請求

方式、請求 URL 地址和請求參數(shù)都一樣時，我們就可以認為請求是一樣的。因此在每次發(fā)起請求時，我們就可以根據(jù)當前請求的請求方式、請求 URL 地址和請求參數(shù)來生成一個唯一的 key，同時為每個請求創(chuàng)建一個專屬的 CancelToken，然后把 key 和 cancel 函數(shù)以鍵值對的形式保存到 Map 對象中，使用 Map 的好處是可以快速的判斷是否有重復的請求：

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

當出現(xiàn)重復請求的時候，我們就可以使用 cancel 函數(shù)來取消前面已經(jīng)發(fā)出的請求，在取消請求之后，我們還需要把取消的請求從 pendingRequest 中移除?，F(xiàn)在我們已經(jīng)知道如何取消請求和如何判斷重復請求，下面我們來介紹如何取消重復請求。

三、如何取消重復請求

因為我們需要對所有的請求都進行處理，所以我們可以考慮使用 Axios 的攔截器機制來實現(xiàn)取消重復請求的功能。Axios 為開發(fā)者提供了請求攔截器和響應攔截器，它們的作用如下：

  • 請求攔截器：該類攔截器的作用是在請求發(fā)送前統(tǒng)一執(zhí)行某些操作，比如在請求頭中添加 token 字段。
  • 響應攔截器：該類攔截器的作用是在接收到服務器響應后統(tǒng)一執(zhí)行某些操作，比如發(fā)現(xiàn)響應狀態(tài)碼為 401 時，自動跳轉到登錄頁。

3.1 定義輔助函數(shù)

在配置請求攔截器和響應攔截器前，阿寶哥先來定義 3 個輔助函數(shù)：

generateReqKey：用于根據(jù)當前請求的信息，生成請求 Key;

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

addPendingRequest：用于把當前請求信息添加到pendingRequest對象中;

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

removePendingRequest：檢查是否存在重復請求，若存在則取消已發(fā)的請求。

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

創(chuàng)建好 generateReqKey、addPendingRequest 和 removePendingRequest 函數(shù)之后，我們就可以設置請求攔截器和響應攔截器了。

3.2 設置請求攔截器

 
 
 
 
    
  
  
  
  
  1. axios.interceptors.request.use( 
    2. 
  
  
  
  
  2.   function (config) { 
    3. 
  
  
  
  
  3.     removePendingRequest(config); // 檢查是否存在重復請求，若存在則取消已發(fā)的請求 
    4. 
  
  
  
  
  4.     addPendingRequest(config); // 把當前請求信息添加到pendingRequest對象中 
    5. 
  
  
  
  
  5.     return config; 
    6. 
  
  
  
  
  6.   }, 
    7. 
  
  
  
  
  7.   (error) => { 
    8. 
  
  
  
  
  8.      return Promise.reject(error); 
    9. 
  
  
  
  
  9.   } 
    10. 
  
  
  
  
  10. ); 
    11.

3.3 設置響應攔截器

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

由于完整的示例代碼內(nèi)容比較多，阿寶哥就不放具體的代碼了。感興趣的小伙伴，可以訪問以下地址瀏覽示例代碼。

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

這里我們來看一下 Axios 取消重復請求示例的運行結果： 

 從上圖可知，當出現(xiàn)重復請求時，之前已發(fā)送且未完成的請求會被取消掉。下面我們用一張流程圖來總結一下取消重復請求的處理流程：

最后，我們來回答前面留下的問題，即 CancelToken 內(nèi)部是如何工作的?

四、CancelToken 的工作原理

在前面的示例中，我們是通過調用 CancelToken 構造函數(shù)來創(chuàng)建 CancelToken 對象：

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

所以接下來，我們來分析 CancelToken 構造函數(shù)，該函數(shù)被定義在 lib/cancel/CancelToken.js 文件中：

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

由以上代碼可知，cancel 對象是一個函數(shù)，當我們調用該函數(shù)后，會創(chuàng)建 Cancel 對象并調用 resolvePromise 方法。該方法執(zhí)行后，CancelToken 對象上 promise 屬性所指向的 promise 對象的狀態(tài)將變?yōu)?resolved。那么這樣做的目的是什么呢?這里我們從 lib/adapters/xhr.js 文件中找到了答案：

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

看完上述的內(nèi)容，可能有的小伙伴還不是很能理解 CancelToken 的工作原理，所以阿寶哥又畫了一張圖來幫助大家理解 CancelToken 的工作原理：

五、總結

本文介紹了在 Axios 中如何取消重復請求及 CancelToken 的工作原理，在后續(xù)的文章中，阿寶哥將會介紹在 Axios 中如何設置數(shù)據(jù)緩存，感興趣的小伙伴不要錯過喲。如果你想了解 Axios 中 HTTP 攔截器及 HTTP 適配器的設計與實現(xiàn)，可以閱讀 77.9K 的 Axios 項目有哪些值得借鑒的地方 這篇文章。

六、參考資源

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

本文標題：聊聊Axios如何取消重復請求？
文章地址：http://www.5511xx.com/article/cceidcc.html