前端實現並發請求。

 

 

 

需求：列表多頁勾選實現批量打印流行病學問卷調查，打印出每一個患者（每一條數據）流行病學調查問卷。

分析：

通常多頁勾選實現批量打印，我們的做法都是，將所有的數據統一傳給后端的一個協議，但是這個需求比較特殊，用戶要求單獨一個患者有一份自己單獨打印出來的問卷，同后端討論后，我們為了實現需求，決定實現的方式為，勾選的數據分別去調用后端打印接口，實現批量單獨打印。

方案確定后，我們有幾個問題需要考慮：

1，如何發送請求，例如頁面勾選100條，不可能一下子發送100個請求，因為瀏覽器有並發請求控制，如果超出並發數，后面的請求將會進入隊列等候，我們在等候中的話  有可能會出現瀏覽器卡死。

2，如果單個繼發，100條請求的話，必須要上一個結束再發送下一個請求，要等100次，這樣效率也是很慢的。

那么為了解決上面兩個問題，我們可以把兩種方法綜合一下，前端實現並發請求，

先並發假設5條，任意條成功之后，后面的隊列加到前面的請求中。

相當於現在有5個水龍頭在排隊打水，假設第一個水龍頭的人打完水，那么后面的一個人就排到第一個水龍頭去，那么相當於前面有5個通道可以排隊，大大減少了排隊壓力。

代碼如何實現，以下代碼為整體邏輯框架：

sendPrint = () => {
  const arrList = Array.from({length:100}, (v,k) => k); // 這邊假設生成勾選的100條數據
  const limit = 5; // 並發請求數量

  // 請求后台打印協議
  const asyncMethond = () => {
    // some code
  }

  // 將所有數據定義成一個數組，這個數組的每一個元素返回一個函數，這個函數里面返回一個異步打印強求
  const asyncFunctionsHandles = arrList.map((item) => {
    return (task) => {
      return asyncMethond().then((res) => {
        const next = asyncFunctionsHandles.shift(); // 隊列中還有等待，則取出等待的第一個
        if (next) {
          next(); // 執行這個
        } else {
          console.log('全部執行完成')
        }
      })
    }
  });

  const promiseList = [];
  // 實現並發請求
  for (let i = 0; i < limit; i ++) {
    const promiseItemFun = asyncFunctionsHandles.shift();
    promiseList.push(promiseItemFun());
  }

  Promise.all(promiseList).then((res) => {
    // 這邊可以做一些全部請求完的操作
  })
}