Vue Axios接口请求怎么取消

最新推荐文章于 2024-07-25 07:30:00 发布

西瓜味的桃子

最新推荐文章于 2024-07-25 07:30:00 发布

阅读量834

点赞数 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接口请求怎么取消。
复制链接

扫一扫

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]

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

08-27

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

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

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

weixin_45403802的博客

12-12

2772

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

vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园(1)

2401_84620231的博客

05-16

400

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

vue axios取消接口请求

总结前端开发中遇到的问题，分享前端知识

08-22

661

从v0.22.0开始，Axios 支持以 fetch API 方式AbortController取消请求：

vue（axios）请求接口

Spo的博客

05-10

622

【代码】vue（axios）请求接口。

vue axios接口请求封装

AIpoem的博客

01-10

2097

简易记录一下最近用到的比较顺手的、axios接口请求的封装

vue+axios 取消网络请求

Jokerxiuka的博客

05-20

752

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

VUE Axios取消请求 - CancelToken

小猫爪子

09-06

3432

铺垫 Axios 是一个基于 Promise 的 HTTP 库，它的浏览器支持性良好，是Vue主推请求异步的方法；它支持多种请求的简写和请求参数的配置，也支持使用自定义配置新建一个axios实例，举例如下 const request = axios.create({ baseURL: 'https://domain-name.com/api/' timeout: 8000 }) 其中，create()方法中是自定义的初始化配置参数。初始化数据除此之外，通常还会设置拦截器，实现h

Vue Axios请求后端接口

qq_52600282的博客

10-27

449

Axios请求后端接口

Vue + Axios 请求接口方法与传参方式详解

Gemini仔仔的专栏

04-25

4268

PPOS表单请求提交时，使用的Content-Type是application/x-www-form-urlencoded，而使用原生AJAX的POST请求如果不指定请求头RequestHeader，默认使用的Content-Type是text/plain;Vue的axios传参方式是requestpayload，参数格式是json，而通过payload形式的数据php $_post无法接受前端提交的数据，要想后端接受post提交的数据，就要进行参数设置，提交的数据形式变为：Form Data。

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. ...

VUE 之 AXIOS请求

最新发布

KEEP CODING

07-25

1203

Set和Map类型的数据也属于异质对象，它们有特定的属性和方法用来操作自身。因此创建代理时，针对特殊的方法需要特殊的对待。 Vue 的ref 是基于reactive函数实现的，它在其基础上，增加了基本类型的响应性、解决reactive在解构时丢失响应性的问题及在模版字面量中自动脱落Ref.

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文件中，使组件更加清晰和简洁，提高了项目的可维护性。同时，由于接口方法已经封装好，可以在其他组件中重复使用，提高了代码的复用性。