promise函数

<think>我们正在回答用户关于JavaScript Promise的问题。用户要求了解Promise的概念、使用方法和示例。 根据引用，我们知道： - Promise是异步操作的封装对象，有三种状态：pending（待定）、fulfilled（已完成）、rejected（已拒绝）[^3]。 - 创建Promise：使用new Promise，传入一个带有resolve和reject两个参数的函数[^1][^2]。 - Promise的方法：主要有then、catch和finally，用于处理成功、失败和最终的操作[^1]。 - 使用示例：引用[4]展示了一个链式调用的例子，其中每个then返回一个新的Promise。 我们的回答需要结构清晰，逐步讲解，并给出示例代码。 步骤： 1. 介绍Promise的概念和状态。 2. 讲解如何创建一个Promise。 3. 讲解Promise的方法（then、catch、finally）以及链式调用。 4. 给出一个完整的示例，并解释。 5. 生成相关问题。 注意：用户要求使用中文回答，并且代码块中的代码要正确。 根据引用，我们还可以补充： - 使用箭头函数简化代码（引用[2]）。 - 克服回调地狱（引用[3]）。 下面开始组织回答。</think>### JavaScript Promise 函数详解 #### 1. Promise 基本概念 Promise 是 JavaScript 处理异步操作的核心对象，它代表一个**尚未完成但预期会完成的操作**。其核心特点包括： - **三种状态**： - `pending`（待定）：初始状态 - `fulfilled`（已完成）：操作成功 - `rejected`（已拒绝）：操作失败 - **状态不可逆**：一旦从 pending 变为 fulfilled/rejected，状态将不再改变[^3] #### 2. 创建 Promise 使用 `new Promise()` 构造函数，接收一个执行器函数（包含 `resolve` 和 `reject` 参数）： ```javascript const promise = new Promise((resolve, reject) => { // 异步操作（如 API 请求、定时器等） setTimeout(() => { const success = true; success ? resolve("操作成功") : reject("操作失败"); }, 1000); }); ``` #### 3. Promise 核心方法 | 方法 | 作用 | 使用场景 | |------------|-------------------------------|----------------------------| | `.then()` | 处理成功状态 | 接收 `resolve` 传递的值 | | `.catch()` | 处理失败状态 | 捕获 `reject` 或抛出的错误 | | `.finally()` | 无论成功失败都执行 | 清理资源（如关闭加载动画） | #### 4. 链式调用示例 ```javascript // 模拟订单处理流程 function checkInventory(item) { return new Promise((resolve, reject) => { setTimeout(() => { Math.random() > 0.3 ? resolve(`${item} 有库存`) : reject("缺货"); }, 500); }); } checkInventory("手机") .then(result => { console.log(result); // "手机 有库存" return "开始支付流程"; // 传递给下一个 then }) .then(paymentMsg => { console.log(paymentMsg); return new Promise(resolve => setTimeout(() => resolve("支付成功"), 800)); }) .then(console.log) // "支付成功" .catch(error => { console.error("流程中断:", error); // 捕获任意环节的错误 }) .finally(() => { console.log("流程结束"); // 总会执行 }); ``` #### 5. 高级用法 - **并行处理**：`Promise.all([p1, p2])` ```javascript Promise.all([ fetch('/api/user'), fetch('/api/products') ]).then(([userData, productData]) => { console.log("双数据加载完成"); }); ``` - **竞速机制**：`Promise.race([p1, p2])` ```javascript Promise.race([ fetch('/api/main'), new Promise((_, reject) => setTimeout(() => reject("请求超时"), 3000) ) ]).catch(console.error); // 3秒未响应则报超时 ``` #### 6. 错误处理最佳实践 - **错误冒泡**：链式调用中只需一个 `.catch()` 处理所有错误 - **异步错误捕获**：在 Promise 内使用 `try/catch` ```javascript new Promise(async (resolve, reject) => { try { const data = await fetchData(); resolve(data); } catch (err) { reject("请求失败：" + err.message); } }); ``` > **Promise 的价值**：通过链式调用替代回调嵌套（回调地狱），使异步代码具备同步代码的可读性，同时提供标准化的错误处理机制[^2][^3]。