問題
在前端頁面數(shù)據(jù)查詢時墩弯，可能會遇到實時搜索的需求吩跋。在實時搜索時，就可能存在一個問題渔工，就是后一次請求數(shù)據(jù)被前一次覆蓋的問題锌钮。
環(huán)境
vue項目，使用axios發(fā)請求
思考過程
- 解決以上問題引矩，我們實際只需要向后臺發(fā)送最后一次數(shù)據(jù)請求就可以了梁丘。
- 但是，我們?nèi)绾尾拍苤烙脩裟拇蔚恼埱笫亲詈笠淮胃淖兯阉鲄?shù)呢旺韭？
- 鑒于問題2氛谜，我們?nèi)绻軌蛟诎l(fā)送請求前，取消前一次請求就可以解決問題了
解決方案
在axios中有提供一個取消請求的方法茂翔，下面是示例代碼
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function (thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// handle error
}
});
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
那么這樣混蔼，我們只需要在每一次請求之前履腋，調(diào)用cancel方法就可以取消前一次請求珊燎，就不會存在數(shù)據(jù)覆蓋問題啦。
進一步思考
cancel真的取消了數(shù)據(jù)查詢請求嗎遵湖？
通過查看axios源碼悔政，發(fā)現(xiàn)cancel方法實際上是調(diào)用XMLHttpRequest.abort()實現(xiàn)的。
實際上延旧，后臺接收到前端的http請求后谋国，就算前端調(diào)用了cancel方法，但是后臺還是會對請求進行處理迁沫。那么我們目前對實時請求的解決方案并不能減少后臺處理無用請求的次數(shù)芦瘾。
方案二
針對以上問題，如果想同時減少后臺查詢的壓力集畅，我們可以給查詢方法加一層防抖處理近弟。但是這樣有一個弊端就是，查詢請求會有延時挺智。
