vue js 请求队列封装代码

let sendNumber = 50  // 同时请求限制数
import requests from './requests'; // axios 普通封装函数
class RequestQueue {
  constructor() {
    this.demand = []; // 请求中队列
    this.queue = []; // 未请求队列
  }
  // 请求入口
  add(request) {
    if (this.demand.length < sendNumber) { // 请求中队列小于限制数
      this.send(request); //直接发送请求 不需要进入未请求队列
    } else {
      this.queue.push(request); //请求中队列大于限制数  未请求队列
    }
  }
  // 发送请求
  send(request) {
    this.demand.push(request);// 请求添加到请求中队列
    const i = this.queue.indexOf(request);// 从未请求队列存在删除掉
    if (i > -1) {
      this.queue.splice(i, 1);
    }
    requests(request.config)// 发送请求
      .then(response => { // 未出现异常
        request.resolve(response);//返回
      })
      .catch(error => {// 异常情况
        request.reject(error);//返回
      })
      .finally(() => {//正确错误都会走
        const index = this.demand.indexOf(request);//从请求中队列中删除掉
        if (index > -1) {
          this.demand.splice(index, 1);
        }
        if (this.queue.length > 0) {// 判断未请求队列中是否还有请求
          this.send(this.queue[0]); // 有就发送
        }
      });
  }
}

const requestQueue = new RequestQueue();// 实例化
const service = config => {
  return new Promise((resolve, reject) => {
    requestQueue.add({// 调用函数 异步等待执行
      config,
      resolve: resolve,
      reject: reject
    });
  });
};
export default service;