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)
            }
        )
    }
}
相关推荐
前端的日常2 分钟前
以下代码,那一部分运行快
前端
GeGarron3 分钟前
Drawing:专注高效画图,让每一次创作都值得被珍藏
前端
梨子同志3 分钟前
Vue v-model 指令详解
前端·vue.js
杨进军4 分钟前
简易实现 React 页面初次渲染
前端·react.js·前端框架
血舞之境6 分钟前
同名类引发问题:没见过世面导致遇见各种诡异的问题
前端
杨进军6 分钟前
实现 React 多个原生标签子节点渲染
前端·react.js·前端框架
前端的日常6 分钟前
AI 工具中,经常提到的 mcp 是什么,有哪些与前端方向结合的场景?
前端
嘉小华7 分钟前
Android 协程全景式深度解析:第四章 Flow响应式流
android·前端
Tina_晴8 分钟前
【基础篇】Promise初体验+案例分析(上)
前端·javascript·面试
7ayl10 分钟前
闭包
javascript