JS前端并发多个相同的请求控制为只发一个请求方式

目录

描述如下老版本cachedAsync进阶版本测试cacheAsync

快速搭建一个服务器客户端提示

描述如下

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

并发： 一个接口请求还处于pending，短时间内就发送相同的请求

1. async function fetchData (a)  {
2.     const data = await fetch('//127.0.0.1:3000/test')
3.     const d = await data.json();
4.     console.log(d);
5.     return d;
6. }
7. fetchData(2) // 编号 1
8. fetchData(2) // 2
9. fetchData(2) // 3
10. fetchData(2) // 4
11. fetchData(2) // 4
12. fetchData(2) // 5
13. fetchData(2)
14. fetchData(2)

复制代码

老版本cachedAsync

我之前使用过vue的缓存函数缓存成功的请求, 实现是这样的。下面的cachedAsync只会缓存成功的请求，如果失败了，直接拉起新的请求。但是如果是上面的并发场景，相同的请求因为无法命中缓存，会出现连续发送三个请求的问题，无法处理这种并发的场景。

1. const cachedAsync = function(fn) {
2.     const cache = Object.create(null);
3.     return async str => {
4.         const hit = cache[str];
5.         if (hit) {
6.             return hit;
7.         }
8.         // 只缓存成功的Promise, 失败直接重新请求
9.         return (cache[str] = await fn(str));
10.     };
11. };
12. const fetch2 = cachedAsync(fetchData)
13. fetch2(2);
14. fetch2(2);
15. fetch2(2);

复制代码

进阶版本

首先缓存是必须的，那么我们只要处理怎么控制并发即可。可以有这么一个思路

每个请求都返回一个新的Promise, Promise的exector的执行时机，通过一个队列保存。当队列长度为1的时候，执行一次请求，如果请求成功，那么遍历队列中的exector，拿到请求的结果然后resolve。如果请求失败了，那么就把这个Promise reject掉，同时出栈。然后递归调用next直到exector队列清空为止

1.   const cacheAsync = (promiseGenerator, symbol) => {
2.     const cache = new Map();
3.     const never = Symbol();
4.     return async (params) => {
5.       return new Promise((resolve, reject) => {
6.       // 可以提供键值
7.         symbol = symbol || params;
8.         let cacheCfg = cache.get(symbol);
9.         if (!cacheCfg) {
10.           cacheCfg = {
11.             hit: never,
12.             exector: [{ resolve, reject }],
13.           };
14.           cache.set(symbol, cacheCfg);
15.         } else {
16.           // 命中缓存
17.           if (cacheCfg.hit !== never) {
18.             return resolve(cacheCfg.hit)
19.           }
20.           cacheCfg.exector.push({ resolve, reject });
21.         }
22.         const { exector } = cacheCfg;
23.         // 处理并发，在请求还处于pending过程中就发起了相同的请求
24.         // 拿第一个请求
25.         if (exector.length === 1) {
26.           const next = async () => {
27.             try {
28.               if (!exector.length) return;
29.               const response = await promiseGenerator(params);
30.               // 如果成功了，那么直接resolve掉剩余同样的请求
31.               while (exector.length) { // 清空
32.                 exector.shift().resolve(response);
33.               }
34.               // 缓存结果
35.               cacheCfg.hit = response;
36.             } catch (error) {
37.               // 如果失败了 那么这个promise的则为reject
38.               const { reject } = exector.shift();
39.               reject(error);
40.               next(); // 失败重试，降级为串行
41.             }
42.           };
43.           next();
44.         }
45.       });
46.     };
47.   };

复制代码

测试cacheAsync

需要测试的场景

请求接口随机出现成功或者失败成功预期结果，剩余的请求都不会发出失败重试，接着发下一个请求

快速搭建一个服务器

1. const koa = require("koa");
2. const app = new koa();
3. function sleep(seconds) {
4. return new Promise((resolve, reject) => {
5.    setTimeout(resolve, seconds);
6. });
7. }
8. app.use(async (ctx, next) => {
9. if (ctx.url === "/test") {
10.    await sleep(200);
11.    const n = Math.random();
12.    // 随机挂掉接口
13.    if (n > 0.8) {
14.        ctx.body = n;
15.    } else {
16.        ctx.status = 404
17.        ctx.body = ''
18.    }
19.    next();
20. }
21. });
22. app.listen(3000, "127.0.0.1", () =>
23. console.log("listening on 127.0.0.1:3000")
24. );

复制代码

客户端

1.   var fetch2 = cacheAsync(fetchData, "test2");
2.   async function fetchData(a) {
3.     const data = await fetch("//127.0.0.1:3000/test");
4.     const d = await data.json();
5.     console.log(d);
6.     return d;
7.   }
8.    // 并发6个相同的请求
9.   console.log(fetch2(2));
10.   console.log(fetch2(2));
11.   console.log(fetch2(2));
12.   console.log(fetch2(2));
13.   console.log(fetch2(2));
14.   console.log(fetch2(2));

复制代码

看下测试结果，刷新下页面
第一次运气很好，第一次接口就请求成功，只发送了一个请求

第二次测试运气不好，最后一个请求才成功，也是最差的场景

第三次测试，请求第三次成功了

测试下缓存 在控制台主动请求fetch2，成功命中。

从测试结果来看是正确的，符合了并发和缓存的场景。有人会问为什么要缓存接口，举个场景。输入关键字搜索，监听的是input事件，在你增删关键字的时候，就会出现请求参数一样的场景，这时候就符合防抖+前端接口缓存的方式。遇到相同关键字直接拉之前的缓存。

提示

这个缓存因为是闭包的方式，因此刷新页面缓存也失效了。不过我认为这个是理应如此，因为大部分场景刷新页面，就是要重置状态，如果要持久化，还不如保存到本地存储。
github-demo
以上就是JS前端并发多个相同的请求控制为只发一个请求的详细内容，更多关于JS并发多相同请求控制为一个的资料请关注中国红客联盟其它相关文章！