本文介绍如何在JavaScript前端处理并发发送的相同请求，通过自定义Promise队列机制，确保多个相同请求只执行一次。当首个请求成功时，其余请求共享结果；若失败则自动重试后续请求，结合缓存策略有效避免重复网络请求，适用于搜索等高频输入场景。
场景描述如下
- 当同时发起多个相同的请求时，若第一个请求成功，则后续所有相同请求不再发出，并直接返回第一个请求的成功结果。
- 若第一个请求失败，则继续发起编号为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的executor执行时机由一个队列保存。
- 当队列长度为1时，执行一次请求。若请求成功，则遍历队列中的executor，获取请求结果并resolve。
- 若请求失败，则将该Promise reject，同时出栈。然后递归调用
next。 - 直到executor队列清空为止。
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));
查看测试结果，刷新下页面
第一次运气很好，第一次接口就请求成功，只发送了一个请求
第二次测试运气不好，最后一个请求才成功，也是最差的场景
第三次测试，请求第三次成功了
测试下缓存 在控制台主动请求fetch2，成功命中。
从测试结果来看是正确的，符合了并发和缓存的场景。有人会问为什么要缓存接口，举个场景。输入关键字搜索，监听的是input事件，在你增删关键字的时候，就会出现请求参数一样的场景，这时候就符合防抖+前端接口缓存的方式。遇到相同关键字直接拉之前的缓存。
提示
这个缓存因为是闭包的方式，因此刷新页面缓存也失效了。不过我认为这个是理应如此，因为大部分场景刷新页面，就是要重置状态，如果要持久化，还不如保存到本地存储。
github-demo
以上就是JS前端并发多个相同的请求控制为只发一个请求的详细内容，更多关于JS并发多相同请求控制为一个的资料请关注本站其它相关文章！