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请求
  

1. <el-button type="primary" @click="sendGet()">发送get请求</el-button>
2. <el-button type="danger" @click="cancel()">取消请求</el-button>
4. import {ref,onMounted,onUnmounted} from 'vue'
5. import axios from "axios";
7. let source:any = null;
8. const sendGet = ()=>{
9.         //可以理解为给定每个接口一个标识
10.   source = axios.CancelToken.source();
11.   axios.get('请求url',
12.       {
13.         cancelToken: source.token
14.       }
15.   ).then(res => {
16.     console.log("get请求",res)
17.   }).catch(err => {
18.     if (axios.isCancel(err)) {
19.       console.log('请求取消', err);
20.     } else {
21.       console.log('其他错误', err)
22.     }
23.   });
24. }
26. const cancel = ()=>{
27.   source && source.cancel('手动调用 source.cancel方法，手动取消请求');
28. }

复制代码

• post请求
  

1. <el-button type="success" @click="sendPost()">发送post请求</el-button>
2. <el-button type="danger" @click="cancel()">取消请求</el-button>
4. import {ref,onMounted,onUnmounted} from 'vue'
5. import axios from "axios";
7. let source:any = null;
8. const sendPost = ()=>{
9.   source = axios.CancelToken.source();
10.   axios.post("请求url",
11.        {},//传参，没有也必须加上{}
12.        {
13.          cancelToken: source.token
14.        })
15.        .then((res) => {
16.          console.log("post请求",res)
17.        }).catch(err => {
18.      if (axios.isCancel(err)) {
19.        console.log('请求取消', err);
20.      } else {
21.        console.log('其他错误', err)
22.      }
23.    })
24. }
26. const cancel = ()=>{
27.   source && source.cancel('手动调用 source.cancel方法，手动取消请求');
28. }

复制代码

v1.5.1 AbortController

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

1. <el-button type="primary" @click="sendNewGet()">发送get请求</el-button>
2. <el-button type="danger" @click="cancelController()">取消新版请求</el-button>
4. import {ref,onMounted,onUnmounted} from 'vue'
5. import axios from "axios";
7. let controller:any = null;
9. const sendNewGet = ()=>{
10. controller = new AbortController();   // 新建一个AbortController实例
11.   fetch('请求url',
12.       {
13.         signal: controller.signal    // signal是AbortController实例的属性
14.       }
15.   ).then(res => {
16.     console.log("新版get请求",res)
17.     //处理返回数据
18.     res.json().then(res1 => {
19.       console.log(res1)
20.     })
23.   }).catch(err => {
24.     console.log(err)
25.   });
26. }
28. const cancelController = ()=>{
29.   controller && controller.abort();//调用abort方法
30. }

复制代码

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