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')
  }
}
相关推荐
拾光拾趣录16 分钟前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲24 分钟前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃33 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军34 分钟前
React 协调器 render 阶段
前端·react.js·前端框架
中微子37 分钟前
Blob 对象及 Base64 转换指南
前端
风铃喵游37 分钟前
让大模型调用MCP服务变得超级简单
前端·人工智能
markyankee10138 分钟前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
中微子38 分钟前
智能前端实践之 shot-word demo
前端
归于尽39 分钟前
智能前端小魔术,让图片开口说单词
前端·react.js
用户98738245810139 分钟前
vite 插件
前端