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')
  }
}
相关推荐
懒大王952711 小时前
uni-app + Vue3 + EZUIKit.js 播放视频流
开发语言·javascript·uni-app
_extraordinary_12 小时前
Java 多线程进阶(四)-- 锁策略,CAS,synchronized的原理,JUC当中常见的类
java·开发语言
懒大王952712 小时前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
yinuo12 小时前
Uni-App跨端实战:微信小程序WebView与H5通信全流程解析(01)
前端
JasmineX-112 小时前
数据结构——顺序表(c语言笔记)
c语言·开发语言·数据结构·笔记
xkroy12 小时前
ajax
前端·javascript·ajax
Yvonne爱编码12 小时前
AJAX入门-URL、参数查询、案例查询
前端·javascript·ajax
java搬砖工-苤-初心不变12 小时前
OpenResty 配合 Lua 脚本的使用
开发语言·lua·openresty
闲人编程12 小时前
前端形态与样式风格:从古典到现代的视觉语言演进
前端·css·状态模式·组件·js·风格·响应式
JudithHuang12 小时前
Mac版微信开发者工具登录二维码不显示问题解决方案
前端