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