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)
            }
        )
    }
}
相关推荐
m0_74824025几秒前
前端编程艺术(5)---Vue3(从零基础到项目开发)
前端
AI人H哥会Java7 分钟前
【JAVA】Java高级:多数据源管理与Sharding:在Spring Boot应用中实现多数据源的管理
java·开发语言
m0_748257469 分钟前
使用Element UI实现前端分页,前端搜索,及el-table表格跨页选择数据,切换分页保留分页数据,限制多选数量
前端·ui·状态模式
Thomas_YXQ9 分钟前
Unity3D项目为什么要使用FairyGUI
开发语言·unity·游戏引擎·unity3d·游戏开发
m0_7482396312 分钟前
【HTML入门】第十六课 - 网页中的按钮们
前端·html
m0_7482451713 分钟前
Chrome浏览器调用ActiveX控件--allWebOffice控件
前端·chrome
web1508541593518 分钟前
【CSS】css 如何实现固定宽高比
前端·css
uyeonashi21 分钟前
【C++】刷题强训(day14)--乒乓球匡、组队竞赛、删除相邻数字的最大分数
开发语言·c++·算法·哈希算法
常常不爱学习24 分钟前
CSS的颜色表示方式
前端·css
Domain-zhuo33 分钟前
React的功能是什么?
前端·javascript·react native·react.js·前端框架·ecmascript