axios中的取消请求

柔光的暖阳◎ 2023-02-15 05:22 93阅读 0赞

转自；[https://www.cnblogs.com/Yancyzheng/p/12576329.html][https_www.cnblogs.com_Yancyzheng_p_12576329.html]

在axios文档中介绍的又两个取消请求的方法

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

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

[https_www.cnblogs.com_Yancyzheng_p_12576329.html]: https://www.cnblogs.com/Yancyzheng/p/12576329.html