vue取消接口请求（最简版教程）

注: 我是把所有请求封装在了单独的js文件中，注意关键代码即可

// 封装好的接口文件

import axios from 'axios'  // 关键代码
const CancelToken = axios.CancelToken   // 关键代码

//方法传参多加一个 that传进去
export function userLoginCA(data, that) {
  return request({
    url: 'user/login',
    method: 'post',
    data,
    // 关键代码 cancelToken
    cancelToken: new CancelToken(function executor(c) {
      that.cancel = c
    })   
  })
}

import { userLoginCA } from '@/api/user'


// 调用 userLoginCA 方法时除了需要的参数，记得传this进去
	userLoginCA({
          loginPath: this.loginCode.loginPath.CA,
          accountType: this.loginCode.accountType.NATURE
        },this)
        .then((res) => {})
        .catch((res) => {})
    }

在需要调用取消的地方 执行 this.cancel('请求已取消')

// 如页面销毁的生命周期
    destroyed() {
    	console.log('退出页面')
   		this.cancel('请求已取消') // 关键代码
    },