欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

axios實(shí)現(xiàn)取消請(qǐng)求的方法詳解

 更新時(shí)間：2024年04月21日 08:28:28   作者：zhangbao90s  
axios 是現(xiàn)在前端項(xiàng)目中最常使用的一個(gè)請(qǐng)求庫(kù),目前 Github star 已經(jīng)達(dá)到了 104k star,本文我們討論的問(wèn)題是axios 是如何實(shí)現(xiàn)取消請(qǐng)求（Cancel requests）的,文中有詳細(xì)的實(shí)現(xiàn)方法,感興趣的朋友可以參考下

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

在 axios 中取消請(qǐng)求

axios 是這樣取消請(qǐng)求的。

const controller = new AbortController();

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

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

取消請(qǐng)求的實(shí)現(xiàn)

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

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

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

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

不過(guò)沒(méi)有關(guān)系，調(diào)用了 controller.abort() 后，controller.signal.aborted 屬性會(huì)置為 true，因此可以通過(guò) 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 會(huì)接受一個(gè) cancel Event 參數(shù)，結(jié)構(gòu)類(lèi)似 { type: 'abort' } 這樣，然后就會(huì)返回 axios 自定義的 CanceledError 錯(cuò)誤。

這里有 2 個(gè)知識(shí)點(diǎn)：

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

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

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

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

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

總結(jié)

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

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

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

相關(guān)文章

最新評(píng)論