axios取消請求，避免重復請求

axios中的取消請求

• 在axios文檔中介紹的又兩個取消請求的方法

1、 使用 CancelToken.source 工廠方法創建 cancel token，如下

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 處理錯誤
  }
});

// 取消請求（message 參數是可選的）
source.cancel('Operation canceled by the user.');

2、 可以通過傳遞一個 executor 函數 CancelToken 的構造函數來創建 cancel token:

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函數接收一個 cancel 函數作為參數
    cancel = c;
  })
});

// 取消請求
cancel();

具體在我們項目中怎么使用 axios 的取消操作（采用第二種方法）

• 每個請求對應一個取消函數，我們需要把這些取消函數存起來，然后遇到相同請求的時候可以取消上一次的請求

import axios from 'axios'

// 
const CancelToken = axios.CancelToken

const service = axios.create ({
  baseURL: "http://localhost:4000",
  timeout: 10000
})

let sources = []  // 定義數組用於存儲每個ajax請求的取消函數及對應標識

// 定義取消操作
let removeSource = (config) => {
  for (let source in sources) {
    // 當多次請求相同時，取消之前的請求
    if (sources[source].umet === config.url + '&' + config.method) {
      sources[source].cancel("取消請求")
      sources.splice(source, 1)
    }
  }
}

// 請求響應
service.interceptors.request.use (config => {
  config.headers = {
    'content-type': 'application/json; charset=utf-8'
  }
  removeSource(config)
  config.cancelToken = new CancelToken((c) => {
    // 將取消函數存起來
    sources.push({umet: config.url + '&' + config.method, cancel: c})
  })
  return config
}, error => {
  return Promise.reject(error)
})

// 結果響應
service.interceptors.response.use (response => {
    // 請求結束后將對應存儲的取消函數刪除
  removeSource(response.config)
  console.log(response.config.url, response.config.data)
  console.log(response)
  return response
}, error => {
  return Promise.reject(error)
})

export default service