Vue Axios接口请求怎么取消

西瓜味的桃子

于 2023-12-18 19:02:56 发布

阅读量826

点赞数 7

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_41843107/article/details/135069340

版权

项目有个需求，有一个接口请求的时候时间比较长，点击取消按钮的时候把接口取消了，防止接口返回后有后续的操作。

在项目中引入axios

import axios from 'axios'

接口中引用

// post请求
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
this.$axios.post('/api/XXX/XXX/XXX/info', {
     type: 1, // 0导入回放 1正常回放
     lineName: this.sectionName,
     folder: this.formlist.time,
     startTime: this.formlist.startTime,
     stopTime: this.formlist.endTime,
 }, {
       cancelToken: source.token
 }).then(res => {
	//	成功后的逻辑
})
// get请求
this.$axios.get('XXX/xxx/xxx',{参数: ""},{cancelToken: source.token}).then(res =>{
	//	成功后的逻辑
})

取消请求

source.cancel("取消请求")

axios取消后会进入catch中，判断是否是取消

axios.isCancel(error) //为true时表示接口取消

参考链接
https://blog.csdn.net/wswq2505655377/article/details/129202680

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

西瓜味的桃子

关注关注

7
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
Vue Axios接口请求怎么取消

【代码】Vue Axios接口请求怎么取消。
复制链接

扫一扫

vue2 3 axios 请求重试、取消请求、loading 串行并行等（分享）_vue await 报错取消loading(1)

2401_84446580的博客

04-29

1121

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

vue axios请求超时的正确处理方法

08-27

Vue Axios 请求超时的正确处理方法在使用 Vue Framework 时， Axios 库是一个非常常用的 HTTP 客户端库，它提供了简洁的 API 来发送 HTTP 请求。然而，在实际开发中，我们经常会遇到请求超时的问题，这篇文章将...

1 条评论您还未登录，请先登录后发表或查看评论

vue axios重复点击取消上一次请求封装的方法

01-19

使用场景重复点击或者多tab标签使用一个视图等（当然也可以用加载中或者透明背景禁止请求中再次点击）封装代码来自于互联网 let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识 let cancelToken = axios.CancelToken; let removePending = (config) => { for(let p in pending){ if(pending[p].u === config.url + '&' + config.method) { //当当前请求在数组中存在时执行函数体 pending[p]

前端终止请求---axios终止请求

最新发布

weixin_45403802的博客

12-12

2763

如果我们想要在终止请求之后，不影响后续请求的正常发出，且后续请求也是可以被终止的，那么需要在每次发出请求之前，都通过构造函数创建一个新的的 AbortController，每次请求绑定的都是新的AbortController，这样才能做到多次请求之间不干扰。同理，如果我们想要在终止请求之后，不影响后续请求的正常发出，且后续请求也是可以被终止的，那么需要在每次发出请求之前，都创建一个新的的 CancelToken，每次请求绑定的都是新的CancelToken，这样才能做到多次请求之间不干扰。

vue+axios 取消网络请求

Jokerxiuka的博客

05-20

750

【代码】vue+axios 取消网络请求。

vue切换路由后取消未完成的axios请求

weixin_44416058的博客

06-08

3951

取消请求的必要性在切换页面后，取消之前还未完成的axios请求，以免之前的请求结果影响当前页面的判断原理实现的原理： 1、取消axios请求的方法； 2、将当前页面的请求取消方法存在state中，在router.beforeEach()钩子函数中遍历执行该取消方法。取消axios请求的方法其实原理都是通过axios的cancelToken属性来实现，在封装好的axios中添加以下代码： const instance = axios.create({ // baseURL: '', time

vue3 + axios 中断取消接口请求

qq_37656005的博客

10-20

3166

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

Vue接口请求取消（AbortController 和 CancelToken）

zluz_的博客

01-17

3106

Vue接口请求取消

【vue项目取消请求】多次发起相同请求，取消前面的接口请求

weixin_38364280的博客

08-16

1850

axios连续多次请求接口，新接口请求时取消之前的接口请求

Vue axios 跨域请求无法带上cookie的解决

10-14

在开发Web应用时，Vue与axios的组合常常用于构建前端接口调用。然而，当进行跨域请求时，有时会遇到一个问题，即浏览器不会自动携带cookie。这种情况在使用Vue axios时尤为常见，尤其是在开发和部署环境之间切换时，...

vue项目使用axios发送请求让ajax请求头部携带cookie的方法

10-17

本篇文章将详细解释如何在Vue项目中配置axios，使其在发送Ajax请求时自动携带cookie。首先，axios在默认情况下不会自动将浏览器的cookie添加到请求头中。这是因为跨域请求（CORS）的安全策略限制，防止恶意网站...

Vue使用axios出现options请求方法

10-16

在本例中，Vue应用中的axios.post()方法触发了这个OPTIONS请求。这是因为POST请求在CORS策略下被认为是不安全的，所以浏览器会先发送OPTIONS请求来确保服务器允许这种类型的请求。以下是相关知识点的详细说明： 1. ...

axios-CancelToken方法取消请求-控制多次同样api调用取消上一次接口调用

路虽远行则将至，事虽难做则必成。

06-04

2322

开发当中看到了axios取消方法，经过查阅，axios这个包是提供了取消请求的方法的。移动端当是tab栏类的页面，或者是下拉刷新和上拉加载是一个接口是，会出现20条情况（接口调用2次）。pc端同一个按钮，分页在连续触发之后会调用多次同样接口，这样会数据不对，资源占用。其实是网络或者人为导致api触发多次，这时候我们就要根据axios取消方法稍作更改。思路1.axios实例是提供了CancelToken () 取消请求,

简单易懂：Axios 如何取消请求的两种方法

LiamHong_的博客

12-06

8116

通过使用Axios提供的取消标记，我们可以在发送请求后随时取消请求，以避免不必要的网络流量和资源浪费。这为我们在前端开发中处理用户操作的中断提供了便利。Axios 的响应拦截器如何使用？响应拦截器的用法以及实践案例。

vue3已封装好的请求控制axios请求取消

m0_62095536的博客

09-25

1076

内容并不多，写的目的主要是百度翻了好多都是直接从官网上抄写案例或者是比较复杂的方法封装嵌套，并没有直接在项目中的简单应用，所以就想写一下笔记记录如何在已经封装的请求的基础上再实现可以选择取消请求的功能。

【Vue】Axios取消请求

小绵杨

09-02

3034

有的时候我们需要取消axios发出的请求，例如在退出页面时，取消掉仍然在进行的请求。 AbortController和CancelToken。 CancelToken AbortController和CancleToken

axios如何取消请求，其原理是什么？

study_way的博客

08-10

1987

axios如何取消请求

axios 中如何取消请求_从不会使用到精通原理_番茄出品

lazy_tomato的博客

02-24

7103

github-axios 点击跳转我去年阅读源码的时候，默认版本还是，今年变成了了，这个需要注意下。我对版本号比较在意的原因是，看到过这句话：整体源码不过千行，可模仿和学习的地方还是有很多的，互勉。由上述的截图可得，目前最新的的取消请求api，推荐使用。旧版本的在后弃用。官方示例 1.3.2 AbortController 2. CancelToken 使用案例官方文档中的演示案例不太直观，我们搭建一个服务，本地调试一下。 2.2 后端服务代码 2.3 启

vue项目中取消axios请求

qq_44096635的博客

05-30

2020

axios中文文档请求文件中 //构造函数来创建 cancel token import request from '@/utils/request' import axios from 'axios' const CancelToken = axios.CancelToken; export function fetchList(query,that) { return request({ url: '/vue-element-admin/article/list', method:

vue axios请求接口封装

10-07

Vue中使用axios发送请求时，可以将请求接口进行封装，以提高代码的可维护性和复用性。首先，在Vue项目中安装Axios库： ``` npm install axios --save ``` 然后，在需要使用请求接口的地方引入axios： ``` import axios from 'axios' ``` 接下来，我们可以创建一个名为api.js的文件，用于封装请求接口。在api.js中，我们可以定义各种请求接口的方法，例如： ``` import axios from 'axios' const baseUrl = 'http://api.example.com' //接口请求基础URL export const getUserInfo = (userId) => { return axios.get(baseUrl + '/user/' + userId) } export const postUserInfo = (userInfo) => { return axios.post(baseUrl + '/user', userInfo) } export const deleteUserInfo = (userId) => { return axios.delete(baseUrl + '/user/' + userId) } ``` 在上述代码中，我们定义了三个请求接口方法，分别是获取用户信息、提交用户信息和删除用户信息。接下来，在需要使用接口的组件中引入这些接口方法： ``` import { getUserInfo, postUserInfo, deleteUserInfo } from './api.js' ``` 然后，在组件中可以直接使用这些封装好的接口方法发送请求，例如： ``` getUserInfo(123).then(response => { //处理请求成功后返回的数据 }).catch(error => { //处理请求失败的错误 }) const userInfo = { //用户信息数据 } postUserInfo(userInfo).then(response => { //处理请求成功后返回的数据 }).catch(error => { //处理请求失败的错误 }) deleteUserInfo(123).then(response => { //处理请求成功后返回的数据 }).catch(error => { //处理请求失败的错误 }) ``` 上述代码演示了如何使用封装好的接口方法发送请求，其中.then()方法处理请求成功后返回的数据，.catch()方法处理请求失败的错误。通过封装接口方法，我们可以将复杂的请求逻辑隐藏在api.js文件中，使组件更加清晰和简洁，提高了项目的可维护性。同时，由于接口方法已经封装好，可以在其他组件中重复使用，提高了代码的复用性。