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

项目实际开发中，会遇到需要主动取消后端接口请求的需求 常见的情况是：接口返回时间过长，用户在未返回之前就进入或返回了其他页面，此时需要取消进行中的请求，使逻辑更完整更加优雅。

直接复制关键代码，直接使用！

接口js文件

代码语言：javascript复制

注: 我是把所有请求封装在了单独的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
    })   
  })
}

页面中引用

代码语言：javascript复制

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('请求已取消') // 关键代码
    },

后端 教程 接口 开发 生命周期

0 人点赞