JS前端并發(fā)多個相同的請求控制為只發(fā)一個請求方式

更新時間：2022年07月13日 08:53:12 作者：狗勝

這篇文章主要為大家介紹了JS前端并發(fā)多個相同的請求控制為只發(fā)一個請求方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

描述如下

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

并發(fā)：一個接口請求還處于pending，短時間內(nèi)就發(fā)送相同的請求

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的緩存函數(shù)緩存成功的請求, 實現(xiàn)是這樣的。下面的cachedAsync只會緩存成功的請求，如果失敗了，直接拉起新的請求。但是如果是上面的并發(fā)場景，相同的請求因為無法命中緩存，會出現(xiàn)連續(xù)發(fā)送三個請求的問題，無法處理這種并發(fā)的場景。

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);

進階版本

首先緩存是必須的，那么我們只要處理怎么控制并發(fā)即可?？梢杂羞@么一個思路

每個請求都返回一個新的Promise, Promise的exector的執(zhí)行時機，通過一個隊列保存。
當隊列長度為1的時候，執(zhí)行一次請求，如果請求成功，那么遍歷隊列中的exector，拿到請求的結(jié)果然后resolve。
如果請求失敗了，那么就把這個Promise reject掉，同時出棧。然后遞歸調(diào)用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;
        // 處理并發(fā)，在請求還處于pending過程中就發(fā)起了相同的請求
        // 拿第一個請求
        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); 
              }
              // 緩存結(jié)果
              cacheCfg.hit = response;
            } catch (error) {
              // 如果失敗了 那么這個promise的則為reject
              const { reject } = exector.shift();
              reject(error);
              next(); // 失敗重試，降級為串行
            }
          };
          next();
        }
      });
    };
  };

測試cacheAsync

需要測試的場景

請求接口隨機出現(xiàn)成功或者失敗
成功預期結(jié)果，剩余的請求都不會發(fā)出
失敗重試，接著發(fā)下一個請求

快速搭建一個服務器

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("http://127.0.0.1:3000/test");
    const d = await data.json();
    console.log(d);
    return d;
  }
   // 并發(fā)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));

看下測試結(jié)果，刷新下頁面

第一次運氣很好，第一次接口就請求成功，只發(fā)送了一個請求

第二次測試運氣不好，最后一個請求才成功，也是最差的場景

第三次測試，請求第三次成功了

測試下緩存 在控制臺主動請求fetch2，成功命中。

從測試結(jié)果來看是正確的，符合了并發(fā)和緩存的場景。有人會問為什么要緩存接口，舉個場景。輸入關鍵字搜索，監(jiān)聽的是input事件，在你增刪關鍵字的時候，就會出現(xiàn)請求參數(shù)一樣的場景，這時候就符合防抖+前端接口緩存的方式。遇到相同關鍵字直接拉之前的緩存。

提示

這個緩存因為是閉包的方式，因此刷新頁面緩存也失效了。不過我認為這個是理應如此，因為大部分場景刷新頁面，就是要重置狀態(tài)，如果要持久化，還不如保存到本地存儲。

github-demo

以上就是JS前端并發(fā)多個相同的請求控制為只發(fā)一個請求的詳細內(nèi)容，更多關于JS并發(fā)多相同請求控制為一個的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

微信小程序（一）新建項目hello WeApp 詳細介紹
這篇文章主要介紹了微信小程序（一）hello WeApp 詳細介紹的相關資料,需要的朋友可以參考下
2016-09-09
WebWorker 封裝 JavaScript 沙箱詳情
這篇文章主要介紹了WebWorker 封裝 JavaScript 沙箱，在前文 quickjs 封裝 JavaScript 沙箱詳情已經(jīng)基于 quickjs 實現(xiàn)了一個沙箱，今天這篇文章再基于 web worker 實現(xiàn)備用方案,需要的朋友可以參考一下
2021-10-10
微信小程序page的生命周期和音頻播放及監(jiān)聽實例詳解
這篇文章主要介紹了微信小程序page的生命周期和音頻播放及監(jiān)聽實例詳解的相關資料,需要的朋友可以參考下
2017-04-04
JSON與JS對象的區(qū)別與對比
JSON是什么？JSON是JS的一種簡單數(shù)據(jù)格式,JSON是JavaScript原生格式，它是一種嚴格的js對象的格式，JSON的屬性名必須有雙引號，如果值是字符串，也必須是雙引號
2017-03-03
微信小程序基礎知識css樣式media標簽
這篇文章主要介紹了微信小程序基礎知識css樣式media標簽的相關資料,需要的朋友可以參考下
2017-02-02
前端取消請求及取消重復請求方式
這篇文章主要為大家介紹了前端取消請求及取消重復請求方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
Javascript設計模式之原型模式詳細
這篇文章主要介紹了Javascript設計模式之原型模式，原型模式用于在創(chuàng)建對象時，通過共享某個對象原型的屬性和方法，從而達到提高性能、降低內(nèi)存占用、代碼復用的效果。下面小編將詳細介紹 ,需要的朋友可以參考下
2021-09-09
微信小程序視圖層（xx.xml)和邏輯層(xx.js)詳細介紹
這篇文章主要介紹了微信小程序視圖層（xx.xml)和邏輯層(xx.js)詳細介紹的相關資料,需要的朋友可以參考下
2016-10-10
移動開發(fā)之自適應手機屏幕寬度
這篇文章主要介紹了移動開發(fā)之自適應手機屏幕寬度的相關資料,網(wǎng)上關于這方面的文章有很多，重復的東西本文不再贅述，僅提供思路，并解釋一些其他文章講述模糊的地方,需要的朋友可以參考下
2016-11-11
微信小程序檢查接口狀態(tài)實例詳解
這篇文章主要介紹了微信小程序檢查接口狀態(tài)實例詳解的相關資料,需要的朋友可以參考下
2017-06-06