前端并发10个相同的请求，怎么控制为只发一个请求？

站长

2024年03月23日 23:25 · 阅读数 34

描述如下

同时发10个相同的请求，如果第一个请求成功，那么剩余的请求都不会发出，第一个请求结果作为剩余请求返回
如果第一个请求失败了，那么接着发编号为2的请求，如果请求成功，那么剩余的请求都不会发出，编号为2的结果作为剩余请求结果
如果第二个请求失败了，那么接着发编号为3的请求，如果请求成功，那么剩余的请求都不会发出，编号为3的结果作为剩余请求结果
...以此递推，直到遇到最坏的情况需要发送10个请求

并发：一个接口请求还处于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, expire = 1000 }) => {
  const cache = new Map();
  // 随便一个不会重复的key
  const never = Symbol();
  return async (params) => {
    return new Promise((resolve, reject) => {
      // 获取缓存key
      if (typeof symbol === 'function') {
        symbol = symbol(params);
      }
      symbol = symbol?.(params) ?? symbol;
      const cacheCfg = cache.get(symbol);
      const { hit, exector } = cacheCfg || {};
      if (!cacheCfg) {
        cache.set(symbol, { hit: never, exector: [{ resolve, reject }] });
      } else {
        // 命中缓存
        if (hit !== never) {
          return resolve(hit);
        }
        exector.push({ resolve, reject });
      }
      
      const next = async () => {
        try {
          if (!exector.length) return;
          const response = await promiseGenerator(params);
          // 如果成功了，那么直接resolve掉剩余同样的请求
          while (exector.length) {
            exector.shift().resolve(response);
          }
          cacheCfg.hit = response;
          // 超时不来取缓存则过期
          expire && setTimeout(() => cache.delete(symbol), expire);
        } catch (error) {
          // 如果失败了 那么这个promise的则为reject
          exector.shift().reject(error);
          next(); // 失败了就继续发送下一个相同的请求
        }
      };
      // 拿第一个请求
      if (exector.length === 1) 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, {symbol: "any"});

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