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')
  }
}
相关推荐
hxmmm5 分钟前
webpack多入口打包文件
前端
CAD老兵6 分钟前
前端组件库的多主题实现原理与实战指南
前端
程序员小羊!6 分钟前
Java教程:JavaWeb ---MySQL高级
java·开发语言·mysql
归于尽8 分钟前
Generator?从 yield 卡壳,到终于搞懂协程那点事
前端·javascript
FogLetter8 分钟前
React组件开发进阶:本地存储与自定义Hooks的艺术
前端·javascript·react.js
支撑前端荣耀13 分钟前
五、测试用例的组织和编写
前端
支撑前端荣耀13 分钟前
七、命令行运行Cypress
前端
支撑前端荣耀13 分钟前
九、重塑你的“测试习惯”——避开Cypress的那些“坑”
前端
m0_7231402314 分钟前
Python训练营-Day49
开发语言·python
拾光拾趣录15 分钟前
Vite 与 Webpack 热更新原理
前端·webpack·vite