18-深入理解JavaScript中的Promise

2025/4/28 2:32:00 来源：https://blog.csdn.net/weixin_46002095/article/details/143818081 浏览: 次关键词：18-深入理解JavaScript中的Promise

笔记+分享

在现代JavaScript开发中，异步编程是不可避免的一部分。为了更好地处理异步操作，ES6引入了Promise。Promise使得异步代码更具可读性和可维护性。本文将详细介绍Promise的概念、用法及其在实际开发中的应用。

什么是Promise？

Promise是JavaScript中的一种对象，用于表示一个异步操作的最终完成（或失败）及其结果值。它有三种状态：

Pending（待定）：初始状态，既没有被兑现，也没有被拒绝。
Fulfilled（已兑现）：操作成功完成，并返回一个值。
Rejected（已拒绝）：操作失败，并返回一个原因。

创建Promise

我们可以通过new Promise构造函数来创建一个Promise对象。构造函数接收一个执行器函数（executor），该函数有两个参数：resolve和reject。

const myPromise = new Promise((resolve, reject) => {// 异步操作if (/* 操作成功 */) {resolve('成功的结果');} else {reject('失败的原因');}
});

使用Promise

Promise创建后，可以使用then和catch方法来处理其结果。

then方法：接收两个回调函数作为参数。第一个回调函数在Promise兑现时执行，第二个回调函数在Promise拒绝时执行。
catch方法：接收一个回调函数，在Promise拒绝时执行。

myPromise.then((result) => {console.log('成功：', result);
}).catch((error) => {console.log('失败：', error);
});

Promise的链式调用

Promise的一个强大特性是链式调用。then方法返回一个新的Promise，这使得可以将多个异步操作串联在一起。

myPromise.then((result) => {console.log('步骤1：', result);return new Promise((resolve, reject) => {// 异步操作resolve('步骤2的结果');});}).then((result) => {console.log('步骤2：', result);}).catch((error) => {console.log('出错：', error);});

Promise.all

Promise.all方法用于将多个Promise实例组合成一个新的Promise。当所有的Promise都成功时，新的Promise兑现；如果有一个Promise失败，新的Promise立即拒绝。

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);Promise.all([promise1, promise2, promise3]).then((results) => {console.log('所有Promise成功：', results);}).catch((error) => {console.log('有一个Promise失败：', error);});

Promise.race

Promise.race方法同样用于将多个Promise实例组合成一个新的Promise，但只要有一个Promise兑现或拒绝，新的Promise就会以该Promise的结果兑现或拒绝。

const promise1 = new Promise((resolve, reject) => {setTimeout(resolve, 100, '第一个完成');
});
const promise2 = new Promise((resolve, reject) => {setTimeout(resolve, 200, '第二个完成');
});Promise.race([promise1, promise2]).then((result) => {console.log('最快完成的Promise：', result);}).catch((error) => {console.log('出错：', error);});

实践中的Promise

以下是一个实际应用Promise的示例：模拟一个异步请求，获取用户数据。

function fetchUserData(userId) {return new Promise((resolve, reject) => {setTimeout(() => {if (userId === 1) {resolve({ id: 1, name: 'Alice' });} else {reject('用户不存在');}}, 1000);});
}fetchUserData(1).then((user) => {console.log('用户数据：', user);}).catch((error) => {console.log('出错：', error);});

与async/await的结合

在ES2017中引入的async和await关键字使得基于Promise的异步代码更具可读性。async函数返回一个Promise，await关键字用于等待Promise兑现。

async function getUserData(userId) {try {const user = await fetchUserData(userId);console.log('用户数据：', user);} catch (error) {console.log('出错：', error);}
}getUserData(1);