前端實時查詢，網絡請求數據結果覆蓋問題

問題

在前端頁面數據查詢時，可能會遇到實時搜索的需求。在實時搜索時，就可能存在一個問題，就是後一次請求數據被前一次覆蓋的問題。

環境

vue項目，使用axios發請求

思考過程

1. 解決以上問題，咱們實際只須要向後臺發送最後一次數據請求就能夠了。
2. 可是，咱們如何才能知道用戶哪次的請求是最後一次改變搜索參數呢？
3. 鑑於問題2，咱們若是可以在發送請求前，取消前一次請求就能夠解決問題了

解決方案

在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.');

那麼這樣，咱們只須要在每一次請求以前，調用cancel方法就能夠取消前一次請求，就不會存在數據覆蓋問題啦。

進一步思考

cancel真的取消了數據查詢請求嗎？

經過查看axios源碼，發現cancel方法其實是調用XMLHttpRequest.abort()實現的。
實際上，後臺接收到前端的http請求後，就算前端調用了cancel方法，可是後臺仍是會對請求進行處理。那麼咱們目前對實時請求的解決方案並不能減小後臺處理無用請求的次數。

方案二

針對以上問題，若是想同時減小後臺查詢的壓力，咱們能夠給查詢方法加一層防抖處理。可是這樣有一個弊端就是，查詢請求會有延時。