axios取消请求

Axios 使用 cancel token 取消请求

1、先在axios请求中加上cancelToken

import request from '../utils/request' // 配置过的Axios 对象
import axios from 'axios' 

export function getDetail(params, that) { 
  return request({
    url: '/api/indexlineage/detail', 
    method: 'get',
    params: params,
    cancelToken: new axios.CancelToken(function executor(c) { // 设置 cancel token
      that.source = c;
    })
  })
}

2、在组件中调用

import { getDetail} from "../api";
export default {
    data() {
      return {
        source: null
      }
    },
    methods: {
      cancelQuest() {
        if (typeof this.source === 'function') {
          this.source('终止请求'); //取消请求
        }
      },
      getDetailData(val) {
        this.cancelQuest() // 请求发送前调用
        let params = {
            id: '1',
        }
        getDetail(params, this).then(res => {
              console.log(res)
            }
        )
    }
}
相关推荐
lozhyf5 分钟前
Go语言-学习一
开发语言·学习·golang
bsr19835 分钟前
前端路由的hash模式和history模式
前端·history·hash·路由模式
dujunqiu15 分钟前
bash: ./xxx: No such file or directory
开发语言·bash
爱偷懒的程序源17 分钟前
解决go.mod文件中replace不生效的问题
开发语言·golang
日月星宿~18 分钟前
【JVM】调优
java·开发语言·jvm
2401_8437852327 分钟前
C语言 指针_野指针 指针运算
c语言·开发语言
杨过姑父32 分钟前
ES6 简单练习笔记--变量申明
前端·笔记·es6
Jacob程序员1 小时前
leaflet绘制室内平面图
android·开发语言·javascript
Sunny_lxm1 小时前
<keep-alive> <component ></component> </keep-alive>缓存的组件实现组件,实现组件切换时每次都执行指定方法
前端·缓存·component·active
eguid_11 小时前
JavaScript图像处理,常用图像边缘检测算法简单介绍说明
javascript·图像处理·算法·计算机视觉