Web前端开发技术

Appearance

promise ​

元信息 ​

  • 目标：理解 Promise 如何以对象表示"未来才有的结果"；重点辨析 Promise.all 的"一败俱败"与 Promise.allSettled 的"逐个交代"，为并发请求场景选对工具
  • 关键概念：Promise、并发、Promise.all、Promise.allSettled、fulfilled/rejected、回调地狱
  • 关联阶段：cp3
  • 常见误区：仪表盘类多请求场景用 Promise.all（一个失败就全丢，拿不到其余成功结果）；以为 allSettled 与 all 返回值同构（前者是 {status, value/reason} 结构数组）；把 catch 到的错误当成"所有请求都失败"（all 只透传第一个拒绝原因）

Promise 全解析，从原理到实战 ​

Promise 全解析，从原理到实战 https://mp.weixin.qq.com/s/hsSsYOB8aOw4ZVsjsx6hvg

处理异步操作已经成为了 JavaScript 日常编码的核心部分。随着应用复杂度的增加，我们经常需要并发执行多个异步任务并合理处理它们的结果。长期以来，Promise.all() 一直是我们处理并发 Promise 的首选方法，但它存在一个致命缺陷：一旦任何一个 Promise 被拒绝（rejected），整个操作就会失败。

Promise.all 的局限性 ​

让我们先回顾一下 Promise.all() 的工作方式及其局限性：

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;
Open on CodeSandboxOpen Sandbox

这种方法的主要问题在于：

  • 任何一个 Promise 失败都会导致整个操作失败
  • 你无法知道哪些操作成功，哪些失败
  • 你无法获取成功操作的结果

在实际应用中，我们通常希望即使某些操作失败，也能继续处理成功的结果。例如，在加载仪表板组件时，即使某个组件的数据获取失败，我们也希望显示其他组件。Promise.allSettled() 解决了上述所有问题。它会等待所有 Promise 完成（无论成功或失败），并返回一个包含每个 Promise 结果的数组：

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;
Open on CodeSandboxOpen Sandbox

Promise.allSettled 返回值结构 ​

Promise.allSettled() 的返回值是一个数组，每个元素对应一个 Promise 的结果，具有以下结构：

  • 对于成功的 Promise：
  • 对于失败的 Promise：

这种统一的结构使得处理结果变得简单明了。尤其在需要并发执行多个独立异步操作，并且希望无论个别操作成功与否都能获取完整结果的场景中，Promise.allSettled() 无疑是最佳选择。它使我们能够构建更具弹性的应用程序，优雅地处理现实世界中不可避免的错误和异常情况。