export class RequestQueue {
  constructor(concurrency = 6) {
    this.concurrency = concurrency; // 設(shè)置最大并發(fā)數(shù)，默認為6
    this.queue = []; // 存放請求的隊列
    this.current = 0; // 當前正在執(zhí)行的請求數(shù)
  }

  // 處理隊列中的請求（出隊）
  dequeue() {
    while (this.current < this.concurrency && this.queue.length) {
      this.current++;
      // 從隊列中取出下一個請求并執(zhí)行
      const requestPromiseFactory = this.queue.shift();
      requestPromiseFactory()
        .then(() => {
          // 成功的請求邏輯
        })
        .catch((error) => {
          // 失敗
          console.log(error);
        })
        .finally(() => {
          this.current--;
          this.dequeue();
        });
    }
  }

  // 添加請求到隊列中（入隊）
  enqueue(requestPromiseFactory) {
    this.queue.push(requestPromiseFactory);
    this.dequeue();
  }
}

const requestQueue = new RequestQueue(6); // 創(chuàng)建一個并發(fā)數(shù)為6的請求隊列

// 模擬一個異步函數(shù)
sleep(fn) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(fn);
    }, 2000);
  });
},

// 生成測試請求
const queue = [...Array(20)].map((_, i) => () =>
  this.sleep(
    axios
      .get('/api/test' + i)
      .then(r => console.log(i, '成功'))
      .catch(e => console.log('失敗', i))
  )
);

// 添加請求到隊列中
for (let i = 0; i < queue.length; i++) {
  requestQueue.enqueue(queue[i]);
}

let requestId = 0; // 全局標識

// 發(fā)送請求
function sendRequest() {
  const currentRequestId = ++requestId; // 遞增全局標識

  // 發(fā)起請求
  axios.get('/api/data')
   .then(response => {
      // 判斷當前請求是否是最新的請求（如果有新的請求那么requestId在新的請求會+1，比當前這個方法的curentRequestId的要大）
      if (currentRequestId >= requestId) {
        // 處理響應(yīng)數(shù)據(jù)
        console.log(response.data);
      }
    })
   .catch(error => {
      // 處理錯誤
      console.error(error);
    });
}

// 通過axios的cancelToken來取消請求

let cancelToken; // 取消請求的令牌

// 發(fā)送請求
function sendRequest() {
  // 取消舊請求
  if (cancelToken) {
    cancelToken.cancel();
  }

  // 創(chuàng)建新的取消請求的令牌
  cancelToken = axios.CancelToken.source();

  // 發(fā)起請求
  axios.get('/api/data', {
    cancelToken: cancelToken.token
  })
 .then(response => {
      // 處理響應(yīng)數(shù)據(jù)
      console.log(response.data);
    })
 .catch(error => {
      // 處理錯誤
      console.error(error);
    });
}

// 自定義的取消請求函數(shù)
let lastCancel = null;
let cancelable = (req, callback) => {
  let cb = callback;
  req.then(res => {
    cb && cb(res);
  })
  let cancel = () => {
    cb = null;
  }
  return cancel;
}
let sendRequest() {
  lastCancel && lastCancel();
  lastCancel = cancelable(axios.get('/api/data'), res => {
    console.log(res);
  })
}