基本概念
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); // 输出: 1
return result * 2;
})
.then((result) => {
console.log(result); // 输出: 2
return 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 应用程序至关重要。