实现axios限制请求队列

背景是：

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

会形成什么状况呢？

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

axios 自带的cancelToken能够帮咱们实现这个需求，而且提供给了咱们一个现成的api axios.CancelToken ，这是一个返回值是带有请求信息的回调函数，咱们能够在须要cancel的时候去执行这个回调函数。具体实现以下：

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

const removePending = (config) => {
   if(pendingMap.has(config.url)){
     let cancel = pendingMap.get(config.url);
     cancel(config.url);
     pendingMap.delete(config.url)
   }
}
复制代码

本地维护一个Map来存储每一个请求信息， addPending 中每次会去先判断是否有cancelToken，若是有就不用从新建立一个cancelToken。 removePending 中判断请求信息是否在Map中，若是该请求存在于Map中，则执行cancel函数，并删除Map中的该请求。

拦截器中的具体应用：

service.interceptors.request.use(config => {
  removePending(config) // 若是存在Map中先cancel该请求
  addPending(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进行捕获
  })
)
复制代码

这里拦截成功后，就能够限制住大流量的屡次请求。

这里只是一个例子，也能够经过判断按钮逻辑来控制用户是否发起请求。

若是有补充或者错误的，请不吝指点~