Vue项目中Axios取消请求功能实现

1,封装axios实例 request.js

javascript 复制代码
const axios = require('axios');
 
// 创建一个axios实例
const service = axios.create({
  baseURL: "https://ip:port",
  timeout: 60000
});
 
export default service

2,封装请求 api.js

javascript 复制代码
import service from 'request'
import axios from "axios";

export const canCancelApi = (data, cancel) => {
    return service({
        url: '/api/test',
        method: 'post',
        data,
        cancelToken: new axios.CancelToken((c) => {
            cancel && cancel(c)
        })
    })
}

3,调用api

javascript 复制代码
import {onBeforeUnmount} from 'vue'
import {canCancelApi} from "api";


const apiCancel = null
// 通过回调接收caccel方法
canCancelApi(params, (cancle) => {
    apiCancel = cancle
  }).then(res => {})

onBeforeUnmount(() => {
  if(apiCancel){
    // 关闭页面时如果请求存在则取消请求
    apiCancel('custom-cancel')
  }
}
相关推荐
鱼樱前端18 分钟前
uni-app快速入门章法(二)
前端·uni-app
Cx330❀25 分钟前
《C++ STL:vector类(下)》:攻克 C++ Vector 的迭代器失效陷阱:从源码层面详解原理与解决方案
开发语言·数据结构·c++·经验分享·算法
user_huenquan32 分钟前
胡恩全10.3作业
开发语言·c++
silent_missile32 分钟前
vue3父组件和子组件之间传递数据
前端·javascript·vue.js
少陵野小Tommy1 小时前
C语言计算行列式的值
c语言·开发语言·学习·学习方法
_extraordinary_1 小时前
Java JVM --- JVM内存区域划分,类加载,GC垃圾回收
java·开发语言·jvm
vortex51 小时前
Bash 中的 shopt -s globstar:递归 Glob 模式详解
开发语言·chrome·bash
livingbody1 小时前
【2025年9月版 亲测可用】《人民日报》PDF文件下载
开发语言·爬虫·python·pdf
摸鱼的老谭1 小时前
Java学习之旅第一季-25:一维数组
java·开发语言·数组
山猪打不过家猪1 小时前
(一)算法
java·开发语言·算法