axios,二次请求的时候,取消第一次发出的请求

let pending = [] //声明一个数组用于存储每个ajax请求的取消函数和ajax标识

let cancelToken = axios.CancelToken

let removePending = config => {

for (let p in pending) {

if (pending[p].u === config.url + ‘&‘ + config.method) {

//当前请求在数组中存在时执行函数体

pending[p].f() //执行取消操作

pending.splice(p, 1) //把这条记录从数组中移除

}

}

}

//添加请求拦截器

axios.interceptors.request.use(

config => {

removePending(config) //在一个ajax发送前执行一下取消操作

config.cancelToken = new cancelToken(c => {

// 这里的ajax标识我是用请求地址&请求方式拼接的字符串,当然你可以选择其他的一些方式

pending.push({ u: config.url + ‘&‘ + config.method, f: c })

})

return config

},

error => {

return Promise.reject(error)

}

)

//添加响应拦截器

axios.interceptors.response.use(

response => {

removePending(response.config) //在一个ajax响应后再执行一下取消操作,把已经完成的请求从pending中移除

return response

},

error => {

return { data: {} } // 返回一个空对象,主要是防止控制台报错

}

)

原文地址:https://www.cnblogs.com/hamili/p/11351425.html

时间: 2024-09-16 06:12:28

axios,二次请求的时候,取消第一次发出的请求的相关文章

vue axios请求频繁时取消上一次请求

一.前言 在项目中经常有一些场景会连续发送多个请求,而异步会导致最后得到的结果不是我们想要的,并且对性能也有非常大的影响.例如一个搜索框,每输入一个字符都要发送一次请求,但输入过快的时候其实前面的请求并没有必要真的发送出去,这时候就需要在发送新请求的时候直接取消上一次请求.vue axios拦截器介绍 原文地址:https://www.cnblogs.com/lalalagq/p/9939542.html 二.代码 <script> import axios from 'axios' impo

axios 二次封装

一般项目往往要对 axios 库进行二次封装,添加一些自定义配置和拦截器等 案例 ./service/axios.js 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991

调用web service出现“请求被中止: 请求已被取消。”

在制作(www.helpqy.com)的后台时,使用StreamWrite向httpwebrequest.getrequeststream中写入Post数据后,一调用httpwebresponse.getresponsestream就出现“请求被中止: 请求已被取消.”的错误,在网上查阅发现只要把contentlength屏蔽掉就能解决问题.后面想了一下原因,是由于前面的streamwriter没有很干净的写完数据流导致后续操作异常.后面还是保留了contentlength,但是不使用Strea

基于AFNetworking 3.0的取消已发出的网络请求

一般情况下主动取消请求的需求不会太多 除非以下几种情况 1.比如电商应用为例 请求频繁,数据量大 2.对性能的要求比较高 3.网络环境比较差 当一个用户打开一个界面 看到的却是漫长的等待框 这时候用户很可能退出当前界面 浏览其他界面.再以上几种情况下 我们有必要做网络资源的控制.当一个请求发送以后,没必要等他的结果的时候我们就应该主动取消请求. 主动取消请求不仅节省了网络资源 ,还可以避免block引用VC导致的延迟内存释放问题.现在很多网络框架都支持这种操作,只要你拿到请求队列随时可以发起/取

HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应

HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应 本文简单总结HTTP的请求与响应. 本文主要目的是对学习内容进行总结以及方便日后查阅. 详细教程和原理可以参考HTTP文档(MDN). 本文版权归马涛涛所有. 本文所引用的图片和文字版权归原作者所有,侵权删. 如有错误请在下方评论区指出,欢迎积极讨论. 查看请求 打开 Network 地址栏输入网址 在 Network 点击,查看 request,点击「view source」 可以看到请求的前三部分了 如果有请求内容的第四

前端面试题(二十五)之http的几种请求方法用途?

1.GET方法发送一个请求来取得服务器上某一资源2.POST方法向URL指定的资源提交数据或附加新的数据3.PUT方法跟POST方法很像,也是向服务器提交数据,但是,他们之间有不同,put指定了资源在服务器上所在的位置,而post没有4.HEAD方法只请求页面的首部5.DELETE方法删除服务器上的某资源6.OPTIONS方法它用于获取当前URL所支持的方法,如果请求成功,会有一个Allow的头包含类类似"GET,POST"这样的信息7.TRACE方法TRACE方法被用于激发一个远程的

为什么请求会发送两次-预检请求opition

我们都知道cors请求分类两类:简单请求get,post,option:其他是复杂请求. 详情查看 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 场景:很多时候发送一个post请求,结果却显示两个请求(一个option请求,一个post请求) 一.什么是options请求 OPTIONS请求即预检请求,用来检测服务器允许的http方法. 总共会发送两次请求.当发起跨域请求时,出于安全考虑,达到一定条件,

python——请求服务器(http请求和https请求)

一.http请求 1.http请求方式:get和post get一般用于获取/查询资源信息,在浏览器中直接输入url+请求参数点击enter之后连接成功服务器就能获取到的内容,post请求一般用于更新资源,通过form表单或者json.xml等其他形式提交给服务器端,然后等待服务器端给返回一个结果的方式(这个返回结果一般就是被修改之后的是否成功的状态,或者是修改后的最新数据table等). http请求,不论是get还是post请求,都会包含几个部分,分别是header,cookie,get会有

无法向会话状态服务器发出会话状态请求。

背景 工作中另一台电脑导入新的源码时,运行网站时出错,无限重定向. 问题 System.Web.HttpException: 无法向会话状态服务器发出会话状态请求.请确保已启动 ASP.NET State service,并且客户端和服务器端口是相同的.如果服务器位于远程计算机上,请检查 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\aspnet_state\Parameters\AllowRemoteConnection 的值,确保服