JS前端並行多個相同的請求控制為只發一個請求方式

2022-07-13 14:01:59

描述如下

同時發多個相同的請求，如果第一個請求成功，那麼剩餘的請求都不會發出，成功的結果作為剩餘請求返回
如果第一個請求失敗了，那麼接著發編號為2的請求，如果請求成功，那麼剩餘的請求都不會發出，成功的結果作為剩餘請求返回
如果第二個請求失敗了，那麼接著發編號為3的請求，如果請求成功，那麼剩餘的請求都不會發出，成功的結果作為剩餘請求返回
...以此遞推，直到遇到最壞的情況需要傳送最後一個請求

並行：一個介面請求還處於pending，短時間內就傳送相同的請求

async function fetchData (a)  {
    const data = await fetch('//127.0.0.1:3000/test')
    const d = await data.json();
    console.log(d);
    return d;
}
fetchData(2) // 編號 1
fetchData(2) // 2
fetchData(2) // 3
fetchData(2) // 4
fetchData(2) // 4
fetchData(2) // 5
fetchData(2)
fetchData(2)

老版本cachedAsync

我之前使用過vue的快取函數快取成功的請求, 實現是這樣的。下面的cachedAsync只會快取成功的請求，如果失敗了，直接拉起新的請求。但是如果是上面的並行場景，相同的請求因為無法命中快取，會出現連續傳送三個請求的問題，無法處理這種並行的場景。

const cachedAsync = function(fn) {
    const cache = Object.create(null);
    return async str => {
        const hit = cache[str];
        if (hit) {
            return hit;
        }
        // 只快取成功的Promise, 失敗直接重新請求
        return (cache[str] = await fn(str));
    };
};
const fetch2 = cachedAsync(fetchData)
fetch2(2);
fetch2(2);
fetch2(2);

進階版本

首先快取是必須的，那麼我們只要處理怎麼控制並行即可。可以有這麼一個思路

每個請求都返回一個新的Promise, Promise的exector的執行時機，通過一個佇列儲存。
當佇列長度為1的時候，執行一次請求，如果請求成功，那麼遍歷佇列中的exector，拿到請求的結果然後resolve。
如果請求失敗了，那麼就把這個Promise reject掉，同時出棧。然後遞迴呼叫next
直到exector佇列清空為止

  const cacheAsync = (promiseGenerator, symbol) => {
    const cache = new Map();
    const never = Symbol();
    return async (params) => {
      return new Promise((resolve, reject) => {
      // 可以提供鍵值
        symbol = symbol || params;
        let cacheCfg = cache.get(symbol);
        if (!cacheCfg) {
          cacheCfg = {
            hit: never,
            exector: [{ resolve, reject }],
          };
          cache.set(symbol, cacheCfg);
        } else {
          // 命中快取
          if (cacheCfg.hit !== never) {
            return resolve(cacheCfg.hit)
          }
          cacheCfg.exector.push({ resolve, reject });
        }
        const { exector } = cacheCfg;
        // 處理並行，在請求還處於pending過程中就發起了相同的請求
        // 拿第一個請求
        if (exector.length === 1) {
          const next = async () => {
            try {
              if (!exector.length) return;
              const response = await promiseGenerator(params);
              // 如果成功了，那麼直接resolve掉剩餘同樣的請求
              while (exector.length) { // 清空
                exector.shift().resolve(response); 
              }
              // 快取結果
              cacheCfg.hit = response;
            } catch (error) {
              // 如果失敗了 那麼這個promise的則為reject
              const { reject } = exector.shift();
              reject(error);
              next(); // 失敗重試，降級為序列
            }
          };
          next();
        }
      });
    };
  };

測試cacheAsync

需要測試的場景

請求介面隨機出現成功或者失敗
成功預期結果，剩餘的請求都不會發出
失敗重試，接著發下一個請求

快速搭建一個伺服器

const koa = require("koa");
const app = new koa();
function sleep(seconds) {
 return new Promise((resolve, reject) => {
   setTimeout(resolve, seconds);
 });
}
app.use(async (ctx, next) => {
 if (ctx.url === "/test") {
   await sleep(200);
   const n = Math.random();
   // 隨機掛掉介面
   if (n > 0.8) {
       ctx.body = n;
   } else {
       ctx.status = 404
       ctx.body = ''
   }
   next();
 }
});
app.listen(3000, "127.0.0.1", () =>
 console.log("listening on 127.0.0.1:3000")
);

使用者端

  var fetch2 = cacheAsync(fetchData, "test2");
  async function fetchData(a) {
    const data = await fetch("//127.0.0.1:3000/test");
    const d = await data.json();
    console.log(d);
    return d;
  }
   // 並行6個相同的請求
  console.log(fetch2(2));
  console.log(fetch2(2));
  console.log(fetch2(2));
  console.log(fetch2(2));
  console.log(fetch2(2));
  console.log(fetch2(2));

看下測試結果，重新整理下頁面

第一次運氣很好，第一次介面就請求成功，只傳送了一個請求