HTML中如何使用Promise.all并行处理多个请求-html教程-PHP中文网

promise.all要求所有请求成功才成功，任一失败即整体失败，适合必须全部数据到位的场景；需用safefetch封装fetch并手动检查http状态，配合try/catch处理错误，且要注意浏览器并发限制。

html中如何使用promise.all并行处理多个请求

Promise.all 会等待所有请求完成，但任意一个失败就整体失败

Promise.all 的核心行为是「全成功才成功，一失败就失败」。它适合你明确需要全部接口返回数据才能继续的场景，比如表单提交前校验多个字段、初始化页面时同时拉取用户信息 + 权限配置 + 全局设置。

常见错误是没处理拒绝（reject）情况，导致 catch 捕获到一个错误后整个流程中断，而你其实只希望跳过那个失败的请求。

如果某个请求超时或 404，Promise.all 立即 reject，不会等其他请求结束
返回值是按传入顺序排列的数组，和请求实际完成时间无关
不支持取消已发起的请求，只能靠 AbortController 配合 fetch 主动中止

用 Promise.allSettled 替代 Promise.all 处理部分失败

当你要「不管成不成功，都拿到每个请求的结果」，就得换 Promise.allSettled。它不会因为某个请求失败而中断，而是返回每个 Promise 的状态对象（{status: "fulfilled", value: ...} 或 {status: "rejected", reason: ...}）。

例如：批量上传文件时，允许部分失败并展示具体哪几个失败了，而不是整批回滚。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

const requests = [
  fetch('/api/user'),
  fetch('/api/permissions').catch(() => null), // 错误写法：catch 不能这样用
  fetch('/api/config')
];

// ✅ 正确方式：用 allSettled + 后续过滤
Promise.allSettled(requests)
  .then(results => {
    const fulfilled = results.filter(r => r.status === 'fulfilled');
    const failed = results.filter(r => r.status === 'rejected');
    console.log('成功数:', fulfilled.length, '失败数:', failed.length);
  });

fetch 配合 Promise.all 时记得加 await 和 try/catch

fetch 本身只在网络异常时 reject，HTTP 状态码如 404、500 不会触发 reject，所以 Promise.all([...]) 不会因 404 自动失败 —— 它会 resolve 成功，但响应体里是错误内容。必须手动检查 response.ok 或 response.status。

别直接把 fetch(url) 塞进 Promise.all，要包装成「真正失败时 reject」的 Promise
推荐封装一个 safeFetch 函数，统一处理非 2xx 状态
外层仍需 try/catch 捕获 Promise.all 的 reject（比如某个域名 DNS 失败）

const safeFetch = (url) =>
  fetch(url).then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
    return res.json();
  });

Promise.all([
  safeFetch('/api/a'),
  safeFetch('/api/b'),
  safeFetch('/api/c')
])
.then(([a, b, c]) => console.log(a, b, c))
.catch(err => console.error('任一请求彻底失败:', err));