[FE] AJAX 異步請求中途取消

應用場景

當前端需要即時搜索時，會不斷的向后端請求ajax，但是前端僅僅需要最后一次的搜索結果，之前的請求全部丟棄。

示例

對於未封裝原生的js來說

let xhr = new XMLHttpRequest();
xhr.open(method,url,true);
xhr.onreadystatechange = ()=>{} // 回調函數
xhr.send(); // 發送請求
xhr.abort(); // 請求終端

Axios

let cancelToken = axios.CancelToken;
let source = ConcelToken.source();
axios({
      method: method,
      url: url,
      concelToken: source.Token
}).then(res=>{
}).catch(err=>{
});
source.cancel();

總結

配合取消請求可以優化減少搜索請求，特別是當用戶不斷修改搜索的時候。
Axios封裝了promise，提供了cancelToken，與c# 的task異步多線程的cancelToken相似。