实现axios限制请求队列

更新日期: 2021-07-22阅读: 1.6k标签: axios
背景是:

在实际开发中,可能会遇到网络问题或者查询量比较大的情况,上一个请求还没有完成,用户就发起了下一个请求。

会造成什么情况呢?

但是同一个请求多次发送到服务器,无疑是对服务器的一种压力,所以需要在已经优化服务器过查询速度后,以及用户网络情况比较差的条件下,在前端进行请求限制。

axios 自带的cancelToken可以帮我们实现这个需求,并且提供给了我们一个现成的api axios.CancelToken ,这是一个返回值是带有请求信息的回调函数,我们可以在需要cancel的时候去执行这个回调函数。具体实现如下:

const service = axios.create({});
const penddingMap = new Map();
const addPendding = (config) => {
	config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
		if(!penddingMap.has(config.url)){
			penddingMap.set(config.url,cancel);
		}
	})
}

const removePendding = (config) => {
	if(penddingMap.has(config.url)){
		let cancel = penddingMap.get(config.url);
    cancel(config.url);
    penddingMap.delete(config.url)
	}
}

本地维护一个Map来存储每个请求信息, addPendding 中每次会去先判断是否有cancelToken,如果有就不用重新创建一个cancelToken。 removePendding 中判断请求信息是否在Map中,如果该请求存在于Map中,则执行cancel函数,并删除Map中的该请求。

拦截器中的具体应用:

service.interceptors.request.use(config => {
	removePending(config) // 如果存在Map中先cancel该请求
  addPendding(config)  // 添加该请求到Map中
  return config
})

service.interceptors.response.use(response => {
	``` // some code
  return response.data
},error => {
	// 捕获cancel请求并抛出
  if(error instanceof Cancel){
    error.message = '上一请求尚未结束,稍等~';
    Message.error(error.message);
    return Promise.reject(error.response) 
		// 这里抛出需要注意,在请求时调用try-catch进行捕获
  })
)

这里拦截成功后,就可以限制住大流量的多次请求。

这里只是一个例子,也可以通过判断按钮逻辑来控制用户是否发起请求。

作者:Tzyito
链接:https://juejin.cn/post/6987673995541741575
来源:掘金

链接: https://fly63.com/article/detial/10568

axios处理Http请求的基本使用方法总汇

axios的功能特性:在浏览器中发送 XMLHttpRequests 请求,在 node.js 中发送 http请求,支持 Promise API,拦截请求和响应,转换请求和响应数据,自动转换 JSON 数据,客户端支持保护安全免受 XSRF 攻击

axios的特点与使用_解决处理axios兼容性问题

axios基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用。项目中发现,在安卓4.3及以下的手机不支持axios的使用,主要就是无法使用promise。加上以下polyfill就可以了。

axios常见传参方式_axios中get/post/put/patch请求

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。axios中get/post/put/patch请求。传参格式为 formData ,传参格式为 query 形式 ,传参格式为 raw等

axios-mock-adapter_一个axios调试好用的工具

axios-mock-adapter可以用来拦截http请求,并模拟响应,使用起来也很简单,比如你想模拟下服务器返回个500错误,什么404找不到、403禁止访问、500服务器错误、503服务不可用、504网关超时等等,你都能模拟出来

vue中axios的使用与封装

分享下我自己的axios封装,axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理。当然首先是npm安装axios 很简单。在src下新建文件夹 service / index.js,接着上代码

vue axios不缓存get请求(防止返回304不更新数据)

最近做项目遇到一款浏览器,由于缓存了get请求,导致不管如何刷新,数据都不更新的问题。以下分享一下解决办法:解决思路就是给每一条get请求增加一个timestamp的参数,value为时间戳

vue中axios请求的封装

发送请求模块目录,@/api/url中存放的是每个模块的URL,使用webpack提供的require.context将src/api/url下后缀为js的所有文件引入,并整理出一个对象。整合common.js & product.js,最终得到的对象如下:

axios基于常见业务场景的二次封装

axios的二次封装,功能实现:1.兼容ie浏览器避免缓存2.减少或更新重复请求3.接口域名使用环境变量4.全局loading状态5.可关闭的全局错误提醒6.可开启携带全局分页参数

Vue+Typescript中在Vue上挂载axios使用时报错

在vue项目开发过程中,为了方便在各个组件中调用axios,我们通常会在入口文件将axios挂载到vue原型身上,如下:这样的话,我们在各个组件中进行请求时

vue axios 拦截器

项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断。axios的拦截器分为请求拦截器和响应拦截器两种。我一般把拦截器写在main.js里。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!