本文我們討論的問題是——axios 是如何實現(xiàn)取消請求（Cancel requests）的？

在 axios 中取消請求

axios 是這樣取消請求的。

const controller = new AbortController();

axios.get('https://httpstat.us/200', {
  signal: controller.signal
}).catch(error => {
  // 2) 在 catch 中捕獲錯誤
  console.log(error) // { message: 'canceled', name: 'CanceledError', code: 'ERR_CANCELED' }
});
// 1) 取消請求
controller.abort()

AbortController 是在 DOM 標(biāo)準(zhǔn)中定義的 API，統(tǒng)一了取消類操作的實現(xiàn)，在瀏覽器端已經(jīng)受到廣泛支持了。

取消請求的實現(xiàn)

取消請求的實現(xiàn)位于 lib/adapters/xhr.js（暫不考慮 Node.js 實現(xiàn)）。

// /v1.6.8/lib/adapters/xhr.js#L244
if (config.signal) {
  config.signal.aborted
    ? onCanceled() :
    config.signal.addEventListener('abort', onCanceled)
}

內(nèi)部會判斷是否傳入了 signal 配置項。如果傳入了，就監(jiān)聽 controller.signal 上的 abort 事件，這個事件會在調(diào)用 controller.abort() 方法時觸發(fā)。

不過，還有一種可能是傳入 controller.signal 時，先前就已經(jīng)調(diào)用了 controller.abort()，這樣 abort 事件永遠(yuǎn)都不會觸發(fā)了。

不過沒有關(guān)系，調(diào)用了 controller.abort() 后，controller.signal.aborted 屬性會置為 true，因此可以通過 aborted 屬性，確保 onCanceled 回調(diào)函數(shù)始終被調(diào)用。

onCanceled 處理函數(shù)內(nèi)容如下。

// /v1.6.8/lib/adapters/xhr.js#L234
onCanceled = cancel => {
  reject(!cancel || cancel.type
    ? new CanceledError(null, config, request) 
    : cancel
  );
  request.abort();
};

調(diào)用 controller.abort() 后，處理函數(shù) onCanceled 會接受一個 cancel Event 參數(shù)，結(jié)構(gòu)類似 { type: 'abort' } 這樣，然后就會返回 axios 自定義的 CanceledError 錯誤。

這里有 2 個知識點：

• axios 對接口請求過程使用 new Promise((resolve,reject)){...} 進(jìn)行了封裝，確保始終返回 Promise 對象，這里的 reject(...) 表示“請求以失敗告終”
• 至于 reject(cancel) 的分支邏輯，是為了兼容 CancelToken 的寫法，這是舊的取消請求的實現(xiàn)，不過現(xiàn)在已經(jīng)棄用了，新項目中不要再用了

最后，調(diào)用 request.abort()，這是實際終止當(dāng)前請求的地方。

request 就是 XMLHttpRequest 實例，abort() 是 XMLHttpRequest 天然支持的用于終止請求的方法。

// /v1.6.8/lib/adapters/xhr.js#L76
let request = new XMLHttpRequest();

到此，我們就完成了 axios 取消請求的實現(xiàn)介紹。你是否看懂了呢？

總結(jié)

取消請求是 axios 提供的核心功能之一，本文我們介紹了它在瀏覽器端的實現(xiàn)。

axios 在瀏覽器端是使用 XMLHttpRequest API 提供請求能力的，其實例上提供了 abort() 方法用于終止請求，而 axios 就是利用這一點跟 AbortController API 配合實現(xiàn)請求的取消的。

到此這篇關(guān)于axios實現(xiàn)取消請求的方法詳解的文章就介紹到這了,更多相關(guān)axios取消請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論