promise 是异步操作的解决方案，提供 Pending、Fulfilled、Rejected 三种状态，通过 resolve 和 reject 控制结果，使用 then、catch、finally 处理状态，支持链式调用，结合 async/await 可写同步风格代码，相比回调函数避免了回调地狱，提升了可读性与错误处理能力。
Promise 是一种处理异步操作的 JavaScript 对象，它代表了一个尚未完成，但预期将来会完成的操作。 简单来说，它就像一个承诺，承诺将来会给你一个结果，可能是成功的结果，也可能是失败的原因。
解决方案
Promise 的基本用法围绕着它的三种状态：
- Pending (进行中): 初始状态，Promise 既没有完成也没有失败。
- Fulfilled (已成功): 操作成功完成。
- Rejected (已失败): 操作失败。
创建一个 Promise：
const myPromise = new Promise((resolve, reject) => { // 异步操作，例如： setTimeout(() => { const success = true; // 假设操作成功 if (success) { resolve("操作成功！"); // 调用 resolve 表示成功 } else { reject("操作失败！"); // 调用 reject 表示失败 } }, 1000); // 模拟 1 秒的延迟 });
使用
then
、
catch
和
finally
处理 Promise 的结果：
myPromise .then((value) => { console.log("成功:", value); // 处理成功的结果 }) .catch((error) => { console.error("失败:", error); // 处理失败的原因 }) .finally(() => { console.log("无论成功或失败都会执行"); // 清理工作，例如关闭加载指示器 });
链式调用： Promise 允许链式调用
then
方法，这使得你可以按顺序执行多个异步操作，并传递结果。
fetch('https://api.example.com/data') .then(response => response.JSon()) // 解析 JSON 响应 .then(data => { console.log("数据:", data); return data.items; // 返回处理后的数据给下一个 then }) .then(items => { console.log("Items:", items); // 处理 items }) .catch(error => console.error("Error:", error));
Promise.all
和
Promise.race
：
-
Promise.all
接收一个 Promise 数组，只有当所有 Promise 都成功时，它才会成功，并返回一个包含所有结果的数组。 如果其中任何一个 Promise 失败，
Promise.all
立即失败。
-
Promise.race
接收一个 Promise 数组，它会返回第一个完成（无论是成功还是失败）的 Promise 的结果或原因。
const promise1 = Promise.resolve(3); const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 200, 'foo')); const promise3 = new Promise((resolve, reject) => setTimeout(reject, 100, 'bar')); Promise.all([promise1, promise2]) .then((values) => { console.log(values); // 输出: [3, 'foo'] }); Promise.race([promise2, promise3]) .then((value) => { console.log("Race 成功:", value); // 不会执行，因为 promise3 先失败 }) .catch((reason) => { console.log("Race 失败:", reason); // 输出: 'bar' });
如何使用 async/await 简化 Promise 操作？
async/await
是基于 Promise 的语法糖，它使异步代码看起来更像同步代码，更容易阅读和维护。
async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log("Data:", data); return data; } catch (error) { console.error("Error:", error); } } fetchData();
async
关键字用于声明一个异步函数，
await
关键字用于暂停函数的执行，直到 Promise 完成。
await
只能在
async
函数内部使用。
try...catch
块用于处理异步操作中可能发生的错误。
Promise 与回调函数有什么区别，Promise 解决了哪些问题？
回调函数是异步编程的早期解决方案，但它们容易导致“回调地狱”（callback hell），代码嵌套层次过深，难以阅读和维护。 Promise 通过链式调用和错误处理机制，解决了回调地狱的问题，使异步代码更加清晰和可控。
具体来说：
- 可读性： Promise 的链式调用比回调函数的嵌套更容易阅读。
- 错误处理： Promise 提供了统一的
catch
方法来处理所有可能的错误，而回调函数需要为每个异步操作单独处理错误。
- 控制反转： Promise 将异步操作的结果控制权交还给调用者，避免了回调函数中可能出现的控制反转问题。
虽然
async/await
进一步简化了异步编程，但 Promise 仍然是理解异步编程的基础。
如何处理 Promise 中的错误，避免程序崩溃？
Promise 中的错误处理至关重要，否则未处理的 Promise 拒绝可能会导致程序崩溃或产生不可预测的行为。 以下是一些处理 Promise 错误的最佳实践：
- 使用
catch
方法：
在 Promise 链的末尾添加一个catch
方法，以捕获任何未处理的错误。
- 使用
try...catch
块：
在async
函数中使用
try...catch
块来捕获异步操作中可能发生的错误。
- 避免忽略 Promise 拒绝： 始终处理 Promise 拒绝，即使只是简单地记录错误。
// 示例 1：使用 catch 方法 fetch('https://api.example.com/invalid-url') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error("Fetch 错误:", error)); // 捕获网络错误或 JSON 解析错误 // 示例 2：使用 try...catch 块 async function fetchData() { try { const response = await fetch('https://api.example.com/invalid-url'); const data = await response.json(); console.log(data); } catch (error) { console.error("Async/await 错误:", error); } } fetchData();
另外，一些 JavaScript 环境（例如 Node.js）提供了全局的未处理 Promise 拒绝处理程序，可以用来捕获所有未处理的 Promise 拒绝，并进行统一的错误处理。 但这通常只作为最后的手段，最佳实践仍然是在每个 Promise 链或
async
函数中显式地处理错误。
评论（已关闭）
评论已关闭