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)
            }
        )
    }
}
相关推荐
林夕忆梦_猫12 小时前
初识C++
开发语言·c++
伐尘12 小时前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向
不想吃饭e12 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
lightqjx12 小时前
【C++】string类 模拟实现
java·开发语言·c++
非凡ghost12 小时前
AOMEI Partition Assistant磁盘分区工具:磁盘管理的得力助手
linux·运维·前端·数据库·学习·生活·软件需求
只_只12 小时前
B1013 PAT乙级JAVA题解 数素数
java·开发语言
minji...12 小时前
C++ list的模拟实现
开发语言·c++·list
UrbanJazzerati12 小时前
前端入门:margin居中、border、box-radius、transform、box-shadow、mouse事件、preventDefault()
前端·面试
蝎子莱莱爱打怪12 小时前
🚀🚀🚀嗨,一起来开发 开源IM系统呀!
前端·后端·github
Enddme13 小时前
《前端笔试必备:JavaScript ACM输入输出模板》
前端·javascript·面试