网站建设的开发方式和费用高端快速建站

基本概念

Promise 是 JavaScript 中用于处理异步操作的对象。它代表一个异步操作的最终完成及其结果值。Promise 提供了一种更优雅的方式来处理异步代码，避免了传统的回调地狱。

Promise 有三种状态

• Pending（等待中）：初始状态，既不是成功，也不是失败；
• Fulfilled（已成功）：操作成功完成；
• Rejected（已失败）：操作失败；

Promise 的状态一旦改变，就不会再变。即从 Pending 变为 Fulfilled 或 Rejected 后，状态就固定了。

创建 Promise

你可以通过 new Promise() 构造函数来创建一个 Promise 对象。构造函数接受一个函数作为参数，这个函数有两个参数：resolve 和 reject，它们都是函数。

1. resolve(value)：将 Promise 的状态从 Pending 变为 Fulfilled，并将 value 作为成功的结果；

2. reject(reason)：将 Promise 的状态从 Pending 变为 Rejected，并将 reason 作为失败的原因

const myPromise = new Promise((resolve, reject) => {setTimeout(() => {const success = true;if (success) {resolve("操作成功！");} else {reject("操作失败！");}}, 1000);
})

使用 Promise

Promise 对象有两个主要的方法来处理成功和失败的情况：.then() 和 .catch()

• .then(onFulfilled, onRejected)：当 Promise 状态变为 Fulfilled 时，调用 onFulfilled 函数；当状态变为 Rejected 时，调用 onRejected 函数；
• .catch(onRejected)：当 Promise 状态变为 Rejected 时，调用 onRejected 函数；

myPromise.then((result) => {console.log(result); // 输出: 操作成功！}).catch((error) => {console.error(error); // 输出: 操作失败！});

Promise 链式调用

Promise 支持链式调用，即在一个 .then() 中返回一个新的 Promise，然后可以在下一个 .then() 中继续处理

new Promise((resolve, reject) => {setTimeout(() => resolve(1), 1000);
})
.then((result) => {console.log(result); // 输出: 1return result * 2;
})
.then((result) => {console.log(result); // 输出: 2return result * 2;
})
.then((result) => {console.log(result); // 输出: 4
});

async/await

async/await 是 ES2017 引入的语法糖，用于更简洁地处理 Promise。async 函数返回一个 Promise，而 await 用于等待 Promise 的完成

const myPromise = new Promise((resolve, reject) => {// 模拟异步操作setTimeout(() => {const success = true; // 可以切换为 false 来模拟失败if (success) {resolve("操作成功！");} else {reject("操作失败！");}}, 1000);
});async function myAsyncFunction() {try {const result = await myPromise;console.log(result); // 输出: 操作成功！} catch (error) {console.error(error); // 输出: 操作失败！}
}myAsyncFunction();

总结

Promise 是 JavaScript 中处理异步操作的重要工具。它通过 .then() 和 .catch() 方法提供了更清晰的代码结构，避免了回调地狱。async/await 进一步简化了 Promise 的使用，使得异步代码看起来更像同步代码。掌握 Promise 的使用对于编写现代 JavaScript 应用程序至关重要。