Axios中的取消請求原始碼解析

前言

在開發中，為了活動動態資料，因此我們需要與後台通過請求進行互動，獲取動態資料來展現給使用者看。有些一些**對實時資訊要求還更高，比如**類、聊天類、直播類等。本章內容涉及思想層面東西比較多，如果出現知識盲點無所謂，主要就是體會promise的運用思想！思想！思想！（小白也可以試試）

當下流行的http庫

它在github上的star數截至到2023年3月已經達到70.2k，這算是比較多的了

今天講什麼

取消請求

先說一下，有時我們上傳乙個檔案到伺服器的時候，檔案很大，不可能一下傳完，但是我們中途發現檔案錯了，因此我們點選取消，即為：取消請求。

在axios中的**如下：

// 建立取消令牌的生成器物件
const canceltoken = axios.canceltoken;
// 從中獲取令牌物件
const source = canceltoken.source();
// 發請求
axios.get('/user/12345', );
// 2秒取消請求
settimeout(function () ,2000);

雖然注釋已經打上了，中文意思大家都懂，但是很少有人能知道這其中promise做了啥，而相反我們更容易理解為cancel函式中斷了非同步請求，是中斷了promise嗎？不是！

原始碼實現

接下來我帶大家簡單實現乙個，你可能就清楚了。

為了便於理解，我少封裝了一層，針對上述const source = canceltoken.source();

我寫了如下**，看起來差不多

var source = source();

接著模擬axios.get(url,options); 函式，我也簡單的這麼寫

axios_get('url',);

最後我們做定時器

settimeout(function () ,5000)

好了，需要呼叫的**都寫好了，接下來就是就是實現這些函式,首先我應該有個source函式，他返回乙個物件，可以呼叫cancel函式，有個token屬性

function source () 
}

ok,接下來我們還有axios_get函式，他的作用就是發請求，假設我們使用xmlhttprequest物件，他裡面則最終經過配置後需要發請求。

function axios_get(url,options)

以上**這個思路沒問題吧？

接著來！使用者點選後，通過呼叫source.cancel() 實際需要訪問到axios_get內部的xmlhttprequest物件，呼叫其的abort函式才能真正意義的取消。因此，我們要想辦法讓source某一部分能訪問到該物件。這裡唯一的觸及點就是傳遞的canceltoken:source.token。

function axios_get(url,options) 
// 最終發請求   
xhr.request();
}

這裡你可以想到直接呼叫函式，或者回傳xhr.abort等方式，但是由於axios是基於promise的，因此，我們最好用promise來處理，顯得也會更優雅,我們假設這個canceltoken就是promise，那麼給他定義.then的話，中間就只差乙個resolve()，該函式就能得到執行了

function axios_get(url,options) );
}// 最終發請求  
xhr.request();
}

好了，繼續往上追溯，這裡的canceltoken也就是我們source.token，他要是個promise的話，我們就得回到之前的建立source函式中

function source () );
return 
}

好像還有點不對，我們應該把鏈結promise和then的乙個放行開關傳遞出去，這樣才能呼叫resolve執行後續的.then從而執行取消請求的**

function source () );
return 
}

好了，至此，我們在source裡面建立promise，將其本身和resolve（cancel) 向外匯出，在請求的時候傳遞給axios_get函式，其內部配置promise的.then：取消請求。

如圖就是這個思想，主要就是我們利用了promise 和其 resolve 來放行到下一步，進行延遲執行。

完整**:

// 建立promise，返回放行開關cancel
function source () );
return 
}	// 發請求
function axios_get(config) )
}}// **執行
var source = source();
axios_get();
settimeout(function () ,5000)

Axios中的取消請求原始碼解析

axios中的取消請求

一比一還原axios原始碼（七）取消功能

axios中的post請求

Axios中的取消請求原始碼解析

axios中的取消請求

一比一還原axios原始碼（七） 取消功能

axios中的post請求

相關推薦

一比一還原axios原始碼（七）取消功能