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

news/2024/12/22 2:57:37/

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')}
}


http://www.ppmy.cn/news/1517585.html

相关文章

动手学深度学习(pytorch)学习记录18-层和块[学习记录]

在具有单一输出的线性模型中 单个神经网络完成这几项工作 : (1)接受一些输入; (2)生成相应的标量输出; (3)具有一组相关 参数(parameters)&#x…

虚幻5|(1)技能栏快捷格子的制作|(2)如何在游戏进行的时候显示鼠标,使用鼠标操作UI||(3)改进技能释放

一.创建技能栏格子UI 1.创建一个UI控件蓝图,命名为技能栏格子(如何创建我就不多说了,学到这了基础知识应该有所掌握了) 2.添加一个边界和垂直框 3.选中边界,右侧细节栏更改如下 4.再拖入一个文本块,做垂直…

K8s系列之:K8s OPERATOR是什么

K8s系列之:K8s OPERATOR是什么 一、K8s OPERATOR是什么二、Operator 如何管理 Kubernetes 应用三、Operator 框架四、Operator 模式五、Kubernetes 上的 Operator六、Operator 示例七、部署 Operator八、使用 Operator九、编写你自己的 Operator十、java-operator-s…

python创建虚拟环境并在pycharm引用

创建虚拟环境 下面操作在cmd中执行 创建新的虚拟环境: python -m venv 环境名 激活虚拟环境: 对于 Windows: 环境名\Scripts\activate 对于 Linux 或 macOS: source 环境名/bin/activate 在虚拟环境中安装 Pandas 和 Numpy&am…

视频图像处理基础--运动目标检测与识别

系列文章目录 文章目录 系列文章目录前言一、视频图像处理二、运动目标检测与识别--帧差法2.1 帧差法2.2 算法原理2.3 利用帧差法进行目标检测的方法2.4 相邻帧帧间差分法的优势和不足2.5 改进的帧间差分法 三、运动目标检测与识别--背景减法3.1 背景减法3.2 算法原理3.3 背景建…

android 将新建的底部导航的demo,修改首页默认显示的字符串为helloworld。

1、先上个图,demo建好了以后,默认显示一个字符串: 2、这个demo的结构: activity_main.xml中用navGraph与其关联。 3、增加方法,给text赋值: package com.example.helloworld.ui.homeimport androidx.lifec…

Python酷库之旅-第三方库Pandas(107)

目录 一、用法精讲 466、pandas.DataFrame.eq方法 466-1、语法 466-2、参数 466-3、功能 466-4、返回值 466-5、说明 466-6、用法 466-6-1、数据准备 466-6-2、代码示例 466-6-3、结果输出 467、pandas.DataFrame.combine方法 467-1、语法 467-2、参数 467-3、功…

bash 脚本的执行方式

在 Bash 中,执行脚本可以通过多种方式,其中最常见的两种是使用 bash 直接运行脚本和使用 source 命令(或 .,即点命令)来执行。这两种方式有着根本的区别,它们对脚本的影响和脚本对环境的影响也不同。 使用…