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')
  }
}
相关推荐
北海-cherish13 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
C嘎嘎嵌入式开发13 小时前
(2)100天python从入门到拿捏
开发语言·python
AALoveTouch13 小时前
网球馆自动预约系统的反调试
javascript·网络
Stanford_110613 小时前
如何利用Python进行数据分析与可视化的具体操作指南
开发语言·c++·python·微信小程序·微信公众平台·twitter·微信开放平台
2501_9159090614 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
Vallelonga14 小时前
Rust 中的数组和数组切片引用
开发语言·rust
Kiri霧14 小时前
Rust模式匹配详解
开发语言·windows·rust
white-persist14 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
千里马-horse15 小时前
Async++ 源码分析8--partitioner.h
开发语言·c++·async++·partitioner
新中地GIS开发老师15 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学