Promise + Async&Await + Array.reduce + 函數遞歸 解決網絡/接口請求的依次/排隊不間斷間隔訪問

背景

試想在一個需要頻繁更新數據的場景（例如：監控、圖表類），常規方法是設置一個間隔 N 秒的定時器 setInterval；但是這種方式存在一個問題，當前一個請求時間過長時（超過了間隔時間），後一個請求的接口響應會先於前一個請求，也就是說，將導致舊的數據渲染會覆蓋新的數據渲染。

解決方案

利用 Array.reduce 的迭代性，註冊異步（Async）的匿名函數，在函數內部將網絡請求封裝成 Promise 實例，在整個迭代週期中等待（Await）前一個請求完成以後再請求後一個請求，完成一個請求週期以後遞歸調用自己，開啓新的一輪一模一樣的請求週期，模擬不間斷的依次網絡請求。

// 模擬網絡請求
function simulateRequest () {
  const time = 1000;
  return new Promise(resolve => setTimeout(() => {
      resolve();
      console.log(`模擬請求花費 ${time}ms`);
  }, time));
}

// 循環順序請求
function cycleRequest () {
  console.log('新的一輪開始請求');
  // 一個請求週期，這邊爲了模擬方便長度爲 10，實際情況可能是 10000 或 99999 這樣的
  const arr = new Array(10).fill(undefined);
  arr.reduce(async (last, curr, index) => {
    await last;
    return simulateRequest()
      .then(() => {
        if (index + 1 === arr.length) {
          // 完成一輪後重復
          cycleRequest();
        }
      });
  }, undefined);
}

// 啓動
cycleRequest();

結果打印：

新的一輪開始請求
模擬請求花費 1000ms
模擬請求花費 1000ms
模擬請求花費 1000ms
模擬請求花費 1000ms
模擬請求花費 1000ms
模擬請求花費 1000ms
模擬請求花費 1000ms
模擬請求花費 1000ms
模擬請求花費 1000ms
模擬請求花費 1000ms
新的一輪開始請求
模擬請求花費 1000ms
模擬請求花費 1000ms
...

版權聲明

本博客所有的原創文章，作者皆保留版權。轉載必須包含本聲明，保持本文完整，並以超鏈接形式註明作者後除和本文原始地址：https://blog.mazey.net/2317.html

（完）