平时开发中一直用各种框架封装好的数据和方法,面试的时候竟然连 Promise 这种基础知识都答不上来,遂整理 Promise 知识点
1. 介绍
Promise 是 JavaScript 中用于处理异步操作的对象。它可以将异步操作转化为一种更易于管理和处理的形式。Promise 有三种状态:pending(进行中)、fulfilled(已完成)和rejected(已拒绝)。一旦 Promise 进入了 fulfilled 或 rejected 状态,它就变为不可变的,无法再改变状态。
2. 创建 Promise
可以使用 new Promise() 构造函数来创建一个 Promise 对象。构造函数接受一个执行器函数作为参数,该函数包含两个参数:resolve 和 reject。
const myPromise = new Promise((resolve, reject) => {
// 异步操作
// 如果操作成功,调用 resolve(value)
// 如果操作失败,调用 reject(error)
});
3. 处理 Promise 结果
Promise 提供了一些方法来处理异步操作的结果。
3.1. 使用 then() 处理成功状态
可以使用 then() 方法来处理 Promise 成功状态。then() 接受一个回调函数作为参数,该函数在 Promise 进入 fulfilled 状态时被调用,可以获取到 Promise 的结果值。
myPromise.then((value) => {
// 处理成功状态
console.log('操作成功,结果为:', value);
});
3.2. 使用 catch() 处理失败状态
可以使用 catch() 方法来处理 Promise 失败状态。catch() 接受一个回调函数作为参数,该函数在 Promise 进入 rejected 状态时被调用,可以获取到 Promise 的错误信息。
myPromise.catch((error) => {
// 处理失败状态
console.log('操作失败,错误信息为:', error);
});
3.3. 使用 finally() 处理最终状态
可以使用 finally() 方法来处理 Promise 最终状态,无论 Promise 最终进入 fulfilled 还是 rejected 状态,finally() 方法都会被调用。
myPromise.finally(() => {
// 处理最终状态
console.log('无论成功还是失败,都会执行该代码块');
});
4. Promise 链式调用
Promise 具有链式调用的特性,可以通过 then() 方法的返回值再次调用其他方法。
myPromise
.then((value) => {
// 处理成功状态
console.log('操作成功,结果为:', value);
// 返回一个新的 Promise 对象
return anotherPromise;
})
.then((value) => {
// 处理新的 Promise 成功状态
console.log('另一个操作成功,结果为:', value);
})
.catch((error) => {
// 处理失败状态
console.log('操作失败,错误信息为:', error);
});
5. Promise.all() 方法
Promise 提供了 Promise.all() 方法,用于并行处理多个 Promise 对象。它接受一个 Promise 对象数组作为参数,并返回一个新的 Promise 对象,该对象在所有 Promise 对象都进入 fulfilled 状态时被解决。
const promises = [promise1, promise2, promise3];
Promise.all(promises)
.then((results) => {
// 处理所有 Promise 对象的结果
console.log('所有操作均已完成,结果为:', results);
})
.catch((error) => {
// 处理失败状态
console.log('操作失败,错误信息为:', error);
});
6. Promise.race() 方法
Promise 提供了 Promise.race() 方法,用于竞争处理多个 Promise 对象。它接受一个 Promise 对象数组作为参数,并返回一个新的 Promise 对象,该对象在第一个进入 fulfilled 或 rejected 状态的 Promise 对象被解决。
const promises = [promise1, promise2, promise3];
Promise.race(promises)
.then((result) => {
// 处理第一个完成的 Promise 对象的结果
console.log('第一个操作已完成,结果为:', result);
})
.catch((error) => {
// 处理失败状态
console.log('操作失败,错误信息为:', error);
});
7. 异步函数和 Promise
在异步函数中,可以使用 async 和 await 关键字来处理 Promise 对象。async 关键字用于定义异步函数,await 关键字用于等待 Promise 对象的解决。
async function myAsyncFunction() {
try {
const result = await myPromise;
// 处理成功状态
console.log('操作成功,结果为:', result);
} catch (error) {
// 处理失败状态
console.log('操作失败,错误信息为:', error);
}
}