js实现axios限制请求队列

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

js实现axios限制请求队列

zx   2021-07-23 我要评论
想了解js实现axios限制请求队列的相关内容吗,zx在本文为您仔细讲解的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js实现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进行捕获
  })
)

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

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

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们