localhost 当前无法处理此请求。_【三分钟前端】并发请求相同接口的优化

最新推荐文章于 2026-07-09 16:47:05 发布

原创最新推荐文章于 2026-07-09 16:47:05 发布 · 2.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

在前端开发中，遇到多个组件并发请求相同接口的情况，可能导致请求冗余。本文通过一个场景分析，展示了如何利用发布订阅模式来优化这个问题。核心思路是判断请求状态，存储回调函数，请求完成后统一执行并清空。分享个人理解，欢迎交流讨论。

场景

多个组件同时获取用户信息后做一些逻辑操作
小程序，多接口同时登录
等等....

这个时候，虽然业务逻辑能走下去，但却请求却冗余了...

如下面的代码

//  创建一个服务
const http = require('http');

http.createServer((req, res) => {
    res.writeHead(200, {
'Content-Type': 'application/json',
//  允许跨域
'Access-Control-Allow-Origin': '*',
    });
    res.end('前端背锅侠');
}).listen(8888);

const request = () =>
    fetch('http://localhost:8888')
        .then((res) => res.text())
        .then(console.log);

//  发送2次请求
request();  //  前端背锅侠
request();  //  前端背锅侠

虽然结果没错，都是打印了前端背锅侠，但是有强迫症的你，怎么可以容忍那个多余的请求呢？

发布订阅

假如要把上述情况优化，不管并发多少次请求，结果只会发送一次请求，并且把响应的数据返回给对应的方法，那么就可以利用发布订阅和谐到这个问题

//  回调函数数组
let list = [];
//  请求锁
let isRequesting = false;
const request = () => {
return new Promise((resolve, reject) => {
if (isRequesting) {
            list.push(resolve);
        } else {
            isRequesting = true;
            fetch('http://localhost:8888')
                .then((res) => res.text())
                .then((res) => {
                    resolve(res);
                    list.forEach((cb) => cb(res));
                    list = [];
                    isRequesting = false;
                });
        }
    });
};

for (let index = 0; index < 10; index++) {
    request().then(console.log);  //  前端背锅侠*10
}