vue + axios項目，重復請求，在上一次請求還沒返回結果的情況下，把上一次請求取消掉

1. 業務場景：頁面搜索功能，輸入框邊輸入邊搜索，點擊鍵盤上的回車也可以搜索，當邊輸入邊搜索結果還處於loading狀態時，又去點擊回車，會再次發送請求，並返回2條一模一樣的數據。

2. 預期效果：只需要返回1條數據。

3. 解決辦法：axios官方文檔有cancelToken屬性可以取消。

4. 項目情況

 　　* 這是項目中統一封裝的axios請求fetch.js，自行添加一個cancelToken屬性。只貼出部分代碼，省略中間的響應、攔截封裝。

import axios from 'axios'
const service = axios.create({
  timeout: null, // 請求超時時間 
}) 
service.cancelToken = axios.CancelToken 
 
// 省略中間代碼...

export default service

 

　　* 項目中統一管理的api列表

import Ajax from './fetch'
import until from '@/utils/utils' 
let baseApiPath = until.baseApiPath
let CancelToken = Ajax.cancelToken

addresslistByName(params, _this) { // 搜索
    return Ajax({
      url: `${baseApiPath}/wx/address/bookPerson/addresslistByName`,
      method: 'get',
      params: params,
      cancelToken: new CancelToken(function executor(c) {
        _this.cancelRequestFn = c
      }) 
    })
  },

 

　　*具體使用該功能的組件

data() {
    return {
      icancelRequestFn: null, // 取消請求的方法
     }          
}

 methods: {
    searchPerson() {  // 搜索的方法
      if (typeof this.cancelRequestFn === 'function') {
        this.cancelRequestFn(); // 取消請求
      }

      let params = {
         // 省略傳參的參數...
      };
        
      // 把當前this傳過去
      this.$api.addresslistByName(params, this).then(res => {
          // 省略代碼...
      }）
}

 

      這樣，就可以達到重復請求的時候，取消上一次未返回結果的請求的目的。