小白必看：前端競(jìng)態(tài)條件的產(chǎn)生與解決

• 一、什么是異步請(qǐng)求的競(jìng)態(tài)問(wèn)題

• 二、如何解決異步請(qǐng)求的競(jìng)態(tài)問(wèn)題

• 2.1 交互層面解決

• 2.2 取消請(qǐng)求

• 2.3 拋棄無(wú)用的請(qǐng)求

• 參考資料

一、什么是異步請(qǐng)求的競(jìng)態(tài)問(wèn)題

首先，先闡述一下什么是競(jìng)態(tài)問(wèn)題，現(xiàn)在我有一個(gè)前端頁(yè)面如下如圖，它的功能是根據(jù)用戶的查詢條件來(lái)請(qǐng)求和展示列表數(shù)據(jù)。

網(wǎng)絡(luò)正常的情況下我們直接請(qǐng)求并展示數(shù)據(jù)就可以了，完全沒(méi)有技術(shù)的難度。但是當(dāng)網(wǎng)絡(luò)不穩(wěn)定時(shí)就會(huì)出現(xiàn)查詢條件和頁(yè)面展示結(jié)果不一致的情況。我們舉例說(shuō)明：

• 首先用戶在描述輸入框輸入“快樂(lè)”，然后點(diǎn)擊查詢 , 這次我們稱為第一次請(qǐng)求
• 緊接著用戶在描述輸入框輸入“悲傷”，然后點(diǎn)擊查詢，這次我們稱為第二次請(qǐng)求

網(wǎng)絡(luò)波動(dòng)時(shí)，如果第二次請(qǐng)求的結(jié)果比第一次請(qǐng)求先返回，頁(yè)面上描述輸入框展示的是 “悲傷”，但是頁(yè)面展示的列表數(shù)據(jù)卻是第一次請(qǐng)求查詢出的“快樂(lè)”對(duì)應(yīng)的結(jié)果。

二、如何解決異步請(qǐng)求的競(jìng)態(tài)問(wèn)題

這里我整理出解決這個(gè)問(wèn)題的幾種方法供大家參考(下文的代碼主要用來(lái)展示思路，并未經(jīng)過(guò)測(cè)試)。

2.1 交互層面解決

在發(fā)起請(qǐng)求后，我們添加全局的 loading 遮罩，或者 禁用****查詢按鈕 ，這樣的話，我們?cè)谝粋€(gè)請(qǐng)求未完成前不能發(fā)送新的請(qǐng)求，這樣就能解決了。

但是這個(gè)方法有幾個(gè)缺點(diǎn)：

• 阻斷交互
• 觸發(fā)查詢的動(dòng)作很多樣，如回車鍵等。這種情況下需要考慮的點(diǎn)會(huì)比較多
• 要說(shuō)服產(chǎn)品、交互的同事（如果你特別能 Battle 需求，就忽略這一條）

2.2 取消請(qǐng)求

如果我們能夠在每次請(qǐng)求時(shí)，都先取消上一次的請(qǐng)求就能確保最終的查詢結(jié)果和查詢的條件是一致的。

2.2.1 axios

我們以 axios 的 cancellation 舉例：

const?CancelToken?=?axios.CancelToken;
let?source

//?請(qǐng)求的函數(shù)
funtion?query?(keyword)?{
??if?(source)?{
????source.cancel('取消請(qǐng)求');
??}
??source?=?CancelToken.source();

????return?axios.post('/list',?{
????keyword
??},?{
????cancelToken:?source.token
??}).catch(function?(thrown)?{
????//?區(qū)別處理取消請(qǐng)求和請(qǐng)求錯(cuò)誤
????if?(axios.isCancel(thrown))?{
??????//?取消請(qǐng)求的邏輯
????}?else?{
??????//?請(qǐng)求錯(cuò)誤
????}
??});
}

上面的代碼中，在每次查詢前都使用 source.cancel() 取消了上一次的請(qǐng)求。

2.2.2 可取消的 Promise

當(dāng)然，不是每個(gè)人都會(huì)使用 axios 作為請(qǐng)求庫(kù)，一個(gè)通用的做法是定制一個(gè)可取消的 Promise 來(lái)封裝請(qǐng)求。（注意：Promise 是不能取消的，這里取消指的是手動(dòng)把 Promise 設(shè)為 rejected 狀態(tài) ），代碼如下：

let?doCancel

//?請(qǐng)求的函數(shù)
funtion?query?(keyword)?{
??if?(doCancel)?{
????//?設(shè)置上一次的?Promise?設(shè)為?rejected?狀態(tài)
????doCancel('取消請(qǐng)求');
??}
??return?new?Promise(function(resolve,?reject)?{
????//?掛載?reject?方法
????doCancel?=?reject
????const?xhr?=?new?XMLHttpRequest();
????xhr.on("load",?resolve);
????xhr.on("error",?reject);
????xhr.open("POST",?'/list',?true);

????//?發(fā)送請(qǐng)求條件，這里未作處理
????xhr.send(null);
??}).catch(function?(thrown)?{
????//?區(qū)別處理取消請(qǐng)求和請(qǐng)求錯(cuò)誤
????if?(axios.isCancel(thrown))?{
??????//?取消請(qǐng)求的邏輯
????}?else?{
??????//?請(qǐng)求錯(cuò)誤
????}
??});
}

如果你不想折騰，這里推薦使用 bluebird 的 cancellation 功能

2.3 拋棄無(wú)用的請(qǐng)求

最后一種處理方式最為比較容易理解：只處理當(dāng)前查詢條件對(duì)應(yīng)請(qǐng)求結(jié)果，其它的查詢條件的結(jié)果我們都認(rèn)為是無(wú)用的請(qǐng)求，對(duì)于無(wú)用的請(qǐng)求我們?cè)诨卣{(diào)函數(shù)里不處理就可以了。

//?請(qǐng)求標(biāo)記
let?gobalReqID?=?0

//?請(qǐng)求的函數(shù)
funtion?query?(keyword)?{
??gobalReqID++
????let?curReqID?=?gobalReqID
????return?axios.post('/list',?{
????keyword
??}).then(res?=>?{
????//?對(duì)比閉包內(nèi)的?curReqID?是否和?gobalReqID?一致
????if?(gobalReqID?===?curReqID)?{
????????return?res
????}?else?{
????????return?Promse.reject('無(wú)用的請(qǐng)求')
????}
??})
}

上面的代碼是使用一個(gè)自增的 reqID 和 閉包特性來(lái)判斷是否是無(wú)用的請(qǐng)求的，對(duì)于比較簡(jiǎn)單的查詢條件，我們可以直接判斷查詢條件的是否一致即可。

參考資料

作者：有朝 鏈接：https://juejin.cn/post/6970710521104302110