vue+axios 取消网络请求

核心代码

api.js文件

import request from '@/utils/request'
import axios from 'axios'
const CancelToken = axios.CancelToken
// 额外传入一个 that
export function getData(data, that) {
  return request({
    url: '/test/list',
    method: 'post',
    data: data,
    // 关键代码 cancelToken
    cancelToken: new CancelToken((c) => {
      that.cancel = c
    })
  })
}

组件使用

// 传参的时候，需要额外传一个this
getData(params, this)
	.then((res) => {})
	.catch((err) => {})
	.finally(() => {})
// 在需要取消的位置执行以下代码即可(组件内调用)
this.cancel()

注意：调用this.cancel()取消请求的时候，函数会把catch和finally走完

附带一个例子

api.js文件

import request from '@/utils/video'
import axios from 'axios'
const CancelToken = axios.CancelToken

export function startPlayback(data,that) {
  return request({
    method: 'get',
    params: data,
    // 关键代码 cancelToken
    cancelToken: new CancelToken((c) => {
      that.cancel = c
    })
  })
}

组件使用

data(){
	isFirst:true,//是否为第一次请求
	loadingKey:"",//最新一次请求的标识
	videoBoxLoading:"",//盒子loading
}
getStartPlayback(params) {
  this.videoBoxLoading = true;
  this.playBackData = {};
  if (!this.isFirst) {//如果不是第一次，就取消请求（即取消上一次的请求，再执行新的请求）
    this.cancel();
  }
  //设置唯一标识 标记最后（最新）的一次请求
  this.loadingKey = params.startTime + params.tag + "";
  this.isFirst = false;//调用后 标记不是第一次请求了
  startPlayback(params, this)
    .then(res => {
    })
    .finally(() => {
      if (this.loadingKey == params.startTime + params.tag + "") {
        // 如果是最新的请求，才执行该操作
        this.videoBoxLoading = false;
      }
    });
},