欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年07月13日 08:53:12   作者:狗勝  
這篇文章主要為大家介紹了JS前端并發(fā)多個(gè)相同的請(qǐng)求控制為只發(fā)一個(gè)請(qǐng)求方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

描述如下

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

并發(fā): 一個(gè)接口請(qǐng)求還處于pending,短時(shí)間內(nèi)就發(fā)送相同的請(qǐng)求

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) // 編號(hào) 1
fetchData(2) // 2
fetchData(2) // 3
fetchData(2) // 4
fetchData(2) // 4
fetchData(2) // 5
fetchData(2)
fetchData(2)

老版本cachedAsync

我之前使用過(guò)vue的緩存函數(shù)緩存成功的請(qǐng)求, 實(shí)現(xiàn)是這樣的。下面的cachedAsync只會(huì)緩存成功的請(qǐng)求,如果失敗了,直接拉起新的請(qǐng)求。但是如果是上面的并發(fā)場(chǎng)景,相同的請(qǐng)求因?yàn)闊o(wú)法命中緩存,會(huì)出現(xiàn)連續(xù)發(fā)送三個(gè)請(qǐng)求的問(wèn)題,無(wú)法處理這種并發(fā)的場(chǎng)景。

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

進(jìn)階版本

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

  • 每個(gè)請(qǐng)求都返回一個(gè)新的Promise, Promise的exector的執(zhí)行時(shí)機(jī),通過(guò)一個(gè)隊(duì)列保存。
  • 當(dāng)隊(duì)列長(zhǎng)度為1的時(shí)候,執(zhí)行一次請(qǐng)求,如果請(qǐng)求成功,那么遍歷隊(duì)列中的exector,拿到請(qǐng)求的結(jié)果然后resolve。
  • 如果請(qǐng)求失敗了,那么就把這個(gè)Promise reject掉,同時(shí)出棧。然后遞歸調(diào)用next
  • 直到exector隊(duì)列清空為止
  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ā),在請(qǐng)求還處于pending過(guò)程中就發(fā)起了相同的請(qǐng)求
        // 拿第一個(gè)請(qǐng)求
        if (exector.length === 1) {
          const next = async () => {
            try {
              if (!exector.length) return;
              const response = await promiseGenerator(params);
              // 如果成功了,那么直接resolve掉剩余同樣的請(qǐng)求
              while (exector.length) { // 清空
                exector.shift().resolve(response); 
              }
              // 緩存結(jié)果
              cacheCfg.hit = response;
            } catch (error) {
              // 如果失敗了 那么這個(gè)promise的則為reject
              const { reject } = exector.shift();
              reject(error);
              next(); // 失敗重試,降級(jí)為串行
            }
          };
          next();
        }
      });
    };
  };

測(cè)試cacheAsync

需要測(cè)試的場(chǎng)景

  • 請(qǐng)求接口隨機(jī)出現(xiàn)成功或者失敗
  • 成功預(yù)期結(jié)果,剩余的請(qǐng)求都不會(huì)發(fā)出
  • 失敗重試,接著發(fā)下一個(gè)請(qǐng)求

快速搭建一個(gè)服務(wù)器

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();
   // 隨機(jī)掛掉接口
   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個(gè)相同的請(qǐng)求
  console.log(fetch2(2));
  console.log(fetch2(2));
  console.log(fetch2(2));
  console.log(fetch2(2));
  console.log(fetch2(2));
  console.log(fetch2(2));

看下測(cè)試結(jié)果,刷新下頁(yè)面

第一次運(yùn)氣很好,第一次接口就請(qǐng)求成功,只發(fā)送了一個(gè)請(qǐng)求

第二次測(cè)試運(yùn)氣不好,最后一個(gè)請(qǐng)求才成功,也是最差的場(chǎng)景

第三次測(cè)試,請(qǐng)求第三次成功了

測(cè)試下緩存 在控制臺(tái)主動(dòng)請(qǐng)求fetch2,成功命中。

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

提示

這個(gè)緩存因?yàn)槭情]包的方式,因此刷新頁(yè)面緩存也失效了。不過(guò)我認(rèn)為這個(gè)是理應(yīng)如此,因?yàn)榇蟛糠謭?chǎng)景刷新頁(yè)面,就是要重置狀態(tài),如果要持久化,還不如保存到本地存儲(chǔ)。

github-demo

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

相關(guān)文章

  • arco?design按需導(dǎo)入報(bào)錯(cuò)排查思路與解決方案解析

    arco?design按需導(dǎo)入報(bào)錯(cuò)排查思路與解決方案解析

    這篇文章主要為大家介紹了arco?design?按需導(dǎo)入報(bào)錯(cuò)排查思路與解決方案解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03
  • Selection與Range 對(duì)象操作示例指南

    Selection與Range 對(duì)象操作示例指南

    這篇文章主要為大家介紹了Selection與Range 對(duì)象操作示例指南,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • JavaScript中的設(shè)計(jì)模式 單例模式

    JavaScript中的設(shè)計(jì)模式 單例模式

    這篇文章主要給大家介紹的是JavaScript中的單例模式,設(shè)計(jì)模式代表了最佳的實(shí)踐,通常被有經(jīng)驗(yàn)的面向?qū)ο蟮能浖_(kāi)發(fā)人員所采用。設(shè)計(jì)模式是軟件開(kāi)發(fā)人員在軟件開(kāi)發(fā)過(guò)程中面臨的一般問(wèn)題的解決方案,需要的朋友可以參考一下
    2021-09-09
  • JS封裝轉(zhuǎn)換前后端接口數(shù)據(jù)格式工具函數(shù)下劃線<=>大寫(xiě)

    JS封裝轉(zhuǎn)換前后端接口數(shù)據(jù)格式工具函數(shù)下劃線<=>大寫(xiě)

    這篇文章主要為大家介紹了JS優(yōu)雅封裝轉(zhuǎn)換前后端接口數(shù)據(jù)格式工具函數(shù)下劃線<=>大寫(xiě)實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03
  • JavaScript前端面試組合函數(shù)

    JavaScript前端面試組合函數(shù)

    這篇文章主要為大家介紹了JavaScript前端面試組合函數(shù)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-06-06
  • 微信小程序與php 實(shí)現(xiàn)微信支付的簡(jiǎn)單實(shí)例

    微信小程序與php 實(shí)現(xiàn)微信支付的簡(jiǎn)單實(shí)例

    這篇文章主要介紹了微信小程序與php 實(shí)現(xiàn)微信支付的簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下
    2017-06-06
  • js題解LeetCode1051 高度檢查器哈希表對(duì)比

    js題解LeetCode1051 高度檢查器哈希表對(duì)比

    這篇文章主要為大家介紹了JS題解LeetCode1051 高度檢查器哈希表對(duì)比,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • sockjs前端WebSocket二次封裝示例詳解

    sockjs前端WebSocket二次封裝示例詳解

    這篇文章主要為大家介紹了sockjs前端WebSocket二次封裝示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • JS 里為什么會(huì)有 this

    JS 里為什么會(huì)有 this

    這篇文章主要介紹了JS 里為什么會(huì)有 this,文章主要從語(yǔ)言創(chuàng)造者(JS 之父的角度)來(lái)思考 this,我之前那篇講 this 的文章是從使用者的角度寫(xiě)的,需要的朋友可以參考一下
    2021-10-10
  • JavaScript 對(duì)象創(chuàng)建的3種方法

    JavaScript 對(duì)象創(chuàng)建的3種方法

    這篇文章主要給大家分享的時(shí)JavaScript 對(duì)象創(chuàng)建的3種方法,在 JavaScript中,對(duì)象是一組有屬性名和屬性值組成的無(wú)序集合,對(duì)象的創(chuàng)建可以通過(guò)對(duì)象字面量、new 關(guān)鍵字 和Object.create()函數(shù)來(lái)創(chuàng)建。
    2021-11-11

最新評(píng)論