Promise的使用
以下集成内容仅对Promise函数的使用思想进行说明，如需进一步的使用，请自行前往网络查找
git仓库地址：https://gitee.com/xiaoli-account/react19_ts> 本文主要介绍Promise的使用方式与常用的函数使用场景.
> Promise 是 JavaScript 中处理异步操作的核心机制，它代表了一个异步操作的最终完成（或失败）及其结果值。
then/catch
`then()` 和 `catch` 是 Promise 实例用来处理状态改变后的最基础方法。
- then(): 用于注册当 Promise 状态变为 `fulfilled`（成功）时的回调函数。它也可以接受第二个参数作为错误回调，但一般推荐使用 `catch` 来统一处理。
- catch(): 用于注册当 Promise 状态变为 `rejected`（失败）时的回调函数。
// 这是一个异步模拟请求const fetchData = new Promise((resolve, reject) => { setTimeout(() => { const success = true; if (success) { resolve("数据获取成功！"); } else { reject("数据获取失败..."); } }, 1000);});// 这是then/catch的使用fetchData .then((data) => { console.log(data); // 输出: 数据获取成功！ return "链式调用传递数据"; }) .then((msg) => { console.log(msg); // 输出: 链式调用传递数据 }) .catch((error) => { // 捕获上述任何过程中的错误或 reject console.error(error); }) .finally(() => { // 无论成功或失败，最后都会执行 console.log("请求结束。"); });
resolve/reject
`Promise.resolve()` 和 `Promise.reject()` 是用于快速创建Promise对象的成功和失败状态。
// 快速创建一个成功的 Promiseconst pResolved = Promise.resolve({ id: 1, name: "Lee" });pResolved.then(user => console.log(user.name)); // 输出: Lee// 典型场景：将其他值快速包装为 Promise 用于一致的异步接口const cachedData = { key: "abc" };function getData() { if (cachedData) { return Promise.resolve(cachedData); // 同步数据转异步接口规范 } return fetch('/api/data').then(res => res.json());}// 快速抛出一个失败的 Promiseconst pRejected = Promise.reject(new Error("权限不足"));pRejected.catch(err => console.error(err.message)); // 输出: 权限不足
Promise.all/Promise.allSettled/Promise.race/Promise.any
这是一组处理多个 Promise 并发的静态方法，分别适用于不同的业务场景：
| | | | |
| | | | |
| all全部成功才成功/every所有项都满足条件才为true | allSettled不管成败/map所有条件项都返回 | race谁先完成就返回谁/find找到第一个满足条件的就返回 | any谁先成功就返回谁/some找到第一个满足条件的就返回 |
- Promise.all(iterable)
* 所有 Promise 都成功才返回结果数组；
* 只要有一个失败，整体立刻 reject 最先失败的错误。
const p1 = Promise.resolve(1);const p2 = Promise.resolve(2);Promise.all([p1, p2]).then(results => console.log(results)); // 输出: [1, 2]
- Promise.allSettled(iterable)
* 等待所有的 Promise 都执行完毕，无论是成功还是失败，最终返回一个包含每个 Promise 状态（`fulfilled` 或 `rejected`）及结果/原因的对象数组。非常适合多个不互相依赖的请求。
const p3 = Promise.resolve("OK"); const p4 = Promise.reject("ERROR"); Promise.allSettled([p3, p4]).then(res => console.log(res)); // 输出: [{status: "fulfilled", value: "OK"}, {status: "rejected", reason: "ERROR"}]
- Promise.race(iterable)
* 返回最先状态改变的 Promise（无论是成功还是失败）。
* 常用于为请求设置超时机制。
const fetchApi = fetch('/api/data'); const timeout = new Promise((_, reject) => setTimeout(() => reject("请求超时"), 5000)); Promise.race([fetchApi, timeout]) .then(res => console.log("请求成功完成")) .catch(err => console.error(err)); // 如果 5 秒内没回来，触发"请求超时"
- Promise.any(iterable)
* 返回第一个成功的 Promise。
* 如果所有的都失败了，才返回一个包含所有失败原因的 `AggregateError`。（理念与 `all` 完全相反）
const p5 = Promise.reject("节点1连接失败"); const p6 = Promise.resolve("节点2连接成功"); Promise.any([p5, p6]).then(res => console.log(res)); // 输出: "节点2连接成功"
async/await
`async/await` 是基于 Promise 的 ES8 语法糖，它允许我们以写同步代码的方式来处理异步流。
- 关键特性:
1. `async` 函数会隐式返回一个 Promise 对象。
2. `await` 只能在 `async` 函数内部使用，它会暂停函数的执行，直到等待的 Promise 敲定（成功或失败）。
// 假设这是我们模拟的网络请求function fetchUser() { return new Promise((resolve) => setTimeout(() => resolve({ name: "Lee" }), 1000));}function fetchPosts(user) { return new Promise((resolve) => setTimeout(() => resolve(["我的第一篇文章", "关于JS的分享"]), 1000));}// 传统的 Promise 链式调用fetchUser() .then(user => fetchPosts(user)) .then(posts => console.log("链式获取到:", posts));// ========== 使用 async/await 改造 (代码逻辑更直观) ==========async function getDashboardData() { try { // 1. 发起并等待用户数据请求完成 const user = await fetchUser(); console.log("获取到用户:", user.name); // 2. 发起并等待文章数据请求完成，逻辑上类似同步的先后顺序 const posts = await fetchPosts(user); console.log("获取到文章列表:", posts); return posts; } catch (error) { // try/catch 代码块可以直接捕获 await 时产生的 reject 异常 console.error("发生错误:", error); }}// 因为 async 函数返回的是 Promise，外面依然可以 thengetDashboardData().then(() => console.log("全部任务结束"));
