JavaScript 中 Promise 怎么实现多接口并发请求-js教程-PHP中文网

Promise并发请求核心是Promise.all()（全成功才成功）和Promise.allSettled()（全返回，含状态标识），配合async/await可提升可读性；需避免for-await串行、注意浏览器并发限制及手动添加超时控制。

javascript 中 promise 怎么实现多接口并发请求

Promise 实现多接口并发请求，核心是用 Promsie.all()、Promise.allSettled() 或手动封装多个 fetch / axios 请求并行发起，而不是串行等待。

用 Promise.all() 并发请求（全部成功才算成功）

适合「所有接口都必须成功，缺一不可」的场景，比如同时拉取用户信息、订单列表、未读消息数。

传入一个 Promise 实例数组，返回一个新的 Promise
只要有一个失败，整个 Promise 就 reject，不会等其余完成
结果按传入顺序排列，不是按响应快慢

示例：

const userReq = fetch('/api/user');
const orderReq = fetch('/api/orders');
const msgReq = fetch('/api/messages');

Promise.all([userReq, orderReq, msgReq])
  .then(responses => Promise.all(responses.map(r => r.json()))) // 转成 JSON
  .then(([user, orders, messages]) => {
    console.log({ user, orders, messages });
  })
  .catch(err => console.error('某个请求失败了：', err));

用 Promise.allSettled() 并发请求（不管成败都返回结果）

适合「允许部分失败，仍要处理已成功的数据」的场景，比如仪表盘聚合多个服务状态。

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

无论成功或失败，都会等到所有 Promise 结束
返回数组，每个元素是 { status: 'fulfilled' | 'rejected', value | reason }
需手动判断每个请求是否成功再取值

示例：

Promise.allSettled([
  fetch('/api/user').then(r => r.json()),
  fetch('/api/orders').then(r => r.json()),
  fetch('/api/health').catch(() => ({ status: 'down' }))
])
.then(results => {
  results.forEach((res, i) => {
    if (res.status === 'fulfilled') {
      console.log(`请求 ${i} 成功：`, res.value);
    } else {
      console.log(`请求 ${i} 失败：`, res.reason);
    }
  });
});

用 async/await 写更清晰的并发逻辑

本质仍是 Promise 并发，只是写法更直观，推荐在 async 函数中使用。

把多个请求声明为变量（不 await），它们会立即发起
再用 await 同时等待全部完成
避免写成 await fetch(); await fetch(); —— 这是串行！

示例：

async function loadDashboard() {
  const userPromise = fetch('/api/user').then(r => r.json());
  const orderPromise = fetch('/api/orders').then(r => r.json());
  const notifyPromise = fetch('/api/notify').then(r => r.json());

  try {
    const [user, orders, notify] = await Promise.all([
      userPromise,
      orderPromise,
      notifyPromise
    ]);
    return { user, orders, notify };
  } catch (err) {
    console.error('加载失败', err);
  }
}