axios实现发起新请求时取消上一次请求（如果上一次请求结果还未返回）

需求：发起新请求时取消上一次请求（如果上一次请求结果还未返回）参考：原文地址：使用说明 · Axios 中文说明 · 看云代码实现：未作处理：import request from '@/utils/request'// 获取跑道图的数据export function getTrackChartDataApi(data) {return request({method: 'post',url: '

凡尔赛学院

1615人浏览 · 2022-02-17 11:03:15

凡尔赛学院 · 2022-02-17 11:03:15 发布

需求：对于同一个接口，发起新请求时取消上一次请求（如果上一次请求结果还未返回）
参考：
- 提示：本文使用了第二种方法。
原文地址：使用说明 · Axios 中文说明 · 看云

代码实现：

未作处理：

import request from '@/utils/request'

export function getTrackChartDataApi(data) {
  return request({
    method: 'post',
    url: '/charts/routeMap',
    data,
  })
}

处理后：

import request from '@/utils/request'

import axios from 'axios'
const { CancelToken } = axios
let cancel = ''

export function getTrackChartDataApi(data) {
  return request({
    method: 'post',
    url: '/charts/routeMap',
    data,
    cancelToken: new CancelToken(cancelFn => {
      cancel && cancel()
      cancel = cancelFn
    }),
  })
}