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

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

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

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

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

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

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

let requestId = 0; // 全局標(biāo)識(shí)

// 發(fā)送請(qǐng)求
function sendRequest() {
  const currentRequestId = ++requestId; // 遞增全局標(biāo)識(shí)

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

// 通過axios的cancelToken來取消請(qǐng)求

let cancelToken; // 取消請(qǐng)求的令牌

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

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

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

// 自定義的取消請(qǐng)求函數(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);
  })
}