ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue3 + axios 停止取消接口请求 [打印本页]

作者: tsx81429 时间: 2024-6-20 19:24
标题: vue3 + axios 停止取消接口请求
媒介

近来开发过程中，总是碰到想把正在请求的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.get('请求url',
{
cancelToken: source.token
}
).then(res => {
console.log("get请求",res)
}).catch(err => {
if (axios.isCancel(err)) {
console.log('请求取消', err);
} else {
console.log('其他错误', err)
}
});
}
const cancel = ()=>{
source && source.cancel('手动调用 source.cancel方法，手动取消请求');
}

复制代码

post请求

<el-button type="success" @click="sendPost()">发送post请求</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 sendPost = ()=>{
source = axios.CancelToken.source();
axios.post("请求url",
{},//传参，没有也必须加上{}
{
cancelToken: source.token
})
.then((res) => {
console.log("post请求",res)
}).catch(err => {
if (axios.isCancel(err)) {
console.log('请求取消', err);
} else {
console.log('其他错误', err)
}
})
}
const cancel = ()=>{
source && source.cancel('手动调用 source.cancel方法，手动取消请求');
}

复制代码

v1.5.1 AbortController

使用fetch() 是一个全局方法，它的请求是基于 Promise 的
method - 请求方法，默认GET
signal - 用于取消 fetch

<el-button type="primary" @click="sendNewGet()">发送get请求</el-button>
<el-button type="danger" @click="cancelController()">取消新版请求</el-button>
import {ref,onMounted,onUnmounted} from 'vue'
import axios from "axios";
let controller:any = null;
const sendNewGet = ()=>{
controller = new AbortController(); // 新建一个AbortController实例
fetch('请求url',
{
signal: controller.signal // signal是AbortController实例的属性
}
).then(res => {
console.log("新版get请求",res)
//处理返回数据
res.json().then(res1 => {
console.log(res1)
})
}).catch(err => {
console.log(err)
});
}
const cancelController = ()=>{
controller && controller.abort();//调用abort方法
}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)