vue3 + axios 中断取消接口请求

最新推荐文章于 2025-03-25 00:00:00 发布

qq_37656005

最新推荐文章于 2025-03-25 00:00:00 发布

阅读量4.3k

点赞数 2

分类专栏： vue3.0 axios 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_37656005/article/details/133938807

版权

前言

最近开发过程中，总是遇到想把正在请求的axios接口取消，这种情况有很多应用场景，举几个例子：

弹窗中接口请求返回图片，用于前端展示，接口还没返回数据，此时关闭弹窗，需要中断接口请求
tab标签页根据后端返回数据，依次渲染，频繁切换标签，需要中断接口请求
for循环中请求接口，遇到跳出循环情况，也需要中断接口请求
跳转路由，离开页面时，可能也需要中断接口请求

下面就是根据以上问题，找到的解决方案

正文

因为axios不同版本取消请求是不同的，目前最新的 axios 的取消请求api，推荐使用 AbortController ，旧版本的 CancelToken 在 v0.22.0 后弃用，截止到此片文章发表，npm上的axios版本号已经更新到v1.5.1，但是相信有一些项目的版本还是v0.x.x的，所以下面分别介绍两种取消方式，大家根据自己项目axios版本号，自行查看

在这里插入图片描述

v0.22.0 CancelToken

get请求

<el-button type="primary" @click="sendGet()">发送get请求</el-button>
<el-button type="danger" @click="cancel()">取消请求</el-button>

import {
   ref,onMounted,onUnmounted} from 'vue'
import axios from "axios";

let source:any = null;
const sendGet = ()=>{
   
	//可以理解为给定每个接口一个标识
  source = axios.CancelToken.source();
  axios