promise的用法

Promise在JavaScript里是个很重要的东西，尤其当你处理那些需要时间才能完成的任务时，比如从网上获取数据，或者读写文件。它能帮你更好地管理这些“未来会发生”的事情，让你的代码更清晰，更容易看懂。

Promise到底是什么？

简单来说，Promise就是一个代表异步操作最终完成（或失败）及其结果值的对象。你可以把它想象成一个占位符，代表一个现在还没有，但将来某个时候会有的值。

想想你点外卖的场景吧。你下单后，外卖平台会给你一个订单号，告诉你“你的餐正在准备中”。你不用一直盯着厨房看，可以继续做别的事情。过一会儿，外卖小哥会回来。如果他带回了你的餐，那这个Promise就是“成功”了。如果他打来电话说餐洒了或者店关门了，那这个Promise就是“失败”了。不管结果是成功还是失败，这个“订单号”代表的事情都算“有结果”了。

Promise有三种状态:
pending (进行中)：初始状态，既不是成功，也不是失败，就像你的餐还在厨房。
fulfilled (已成功)：操作成功完成，并有了一个结果值，比如你吃上了香喷喷的外卖。它也叫“resolved”。
rejected (已失败)：操作失败了，并带有一个失败的原因（通常是一个错误），比如外卖洒了。

一旦Promise从“pending”变成了“fulfilled”或“rejected”，它的状态就固定了，不会再变。我们称这种状态为“settled”（已敲定）。

为什么要用Promise？

在Promise出现之前，我们处理异步操作主要靠回调函数（callback function）。回调函数就是你把一个函数传给另一个函数，等那个函数做完事情再回来调用你传进去的函数。听起来没问题，对吧？

但当异步操作一个接一个，环环相扣时，回调函数就会带来一个大麻烦，我们管它叫“回调地狱”（callback hell）。代码会一层套一层，缩进越来越深，读起来像俄罗斯套娃，很难理解和维护。

举个例子，假设你要：
1. 获取用户数据
2. 根据用户数据获取用户的订单
3. 根据订单数据获取订单详情

用回调函数可能长这样：

javascript
getUser(function(userData) {
getOrders(userData.id, function(orderData) {
getOrderDetails(orderData.orderId, function(details) {
console.log('订单详情:', details);
}, function(error) {
console.error('获取订单详情失败:', error);
});
}, function(error) {
console.error('获取订单失败:', error);
});
}, function(error) {
console.error('获取用户失败:', error);
});

是不是看着就头大？Promise就是来解决这个问题的，它提供了一种更干净、更易读的方式来组织异步代码。

创建一个Promise

你可以用new Promise()构造函数来创建一个Promise。这个构造函数接收一个函数作为参数，这个函数被称为“执行器”（executor）。执行器函数又会接收两个参数：resolve和reject.

resolve是一个函数，当你异步操作成功时调用它，并把结果传进去。
reject是一个函数，当你异步操作失败时调用它，并把错误原因传进去。

javascript
const myFirstPromise = new Promise((resolve, reject) => {
// 这里放你的异步操作
// 比如，模拟一个网络请求，2秒后成功
setTimeout(() => {
const success = true; // 假设操作成功
if (success) {
resolve('数据已成功获取！'); // 成功时调用resolve
} else {
reject('数据获取失败了。'); // 失败时调用reject
}
}, 2000);
});

记住，执行器函数是同步执行的，但它里面通常会包含异步代码。一旦resolve或reject被调用，Promise的状态就确定了，后续再调用resolve或reject都不会起作用.

消费Promise：.then(), .catch(), .finally()

创建好Promise后，你需要“消费”它，也就是处理它成功或失败后的结果。这时候就要用到.then(), .catch(), 和.finally()这几个方法了.

.then() 处理成功和失败

.then()方法用来注册Promise成功时的回调函数和失败时的回调函数.

它接收两个可选参数：
1. onFulfilled：当Promise成功（fulfilled）时调用的函数，会接收到成功的结果。
2. onRejected：当Promise失败（rejected）时调用的函数，会接收到失败的原因（错误）。

javascript
myFirstPromise.then(
(successMessage) => {
console.log('成功啦！结果是:', successMessage); // Promise成功时执行
},
(errorMessage) => {
console.error('出错了:', errorMessage); // Promise失败时执行
}
);

通常，我们更倾向于用.catch()来处理错误，这样代码更清晰。

.catch() 专门处理错误

.catch()方法是专门用来处理Promise链中任何一个Promise被拒绝（rejected）时的错误。它其实就是.then(null, onRejected)的简写.

javascript
myFirstPromise
.then((successMessage) => {
console.log('成功啦！结果是:', successMessage);
})
.catch((errorMessage) => {
console.error('出错了:', errorMessage); // 只处理错误
});

最佳实践是，始终在你的Promise链末尾加上.catch()来处理错误。否则，未被处理的Promise拒绝可能会导致难以调试的问题，甚至在未来的Node.js版本中直接崩溃进程.

.finally() 无论如何都会执行

.finally()方法会在Promise不管成功还是失败后，都会执行它的回调函数。它不接收任何参数，通常用于进行一些清理工作，比如关闭加载动画或者释放资源.

javascript
myFirstPromise
.then((successMessage) => {
console.log('成功啦！结果是:', successMessage);
})
.catch((errorMessage) => {
console.error('出错了:', errorMessage);
})
.finally(() => {
console.log('Promise操作完成了，不管成功还是失败。'); // 总是会执行
});

Promise链式调用

Promise的真正强大之处在于它的链式调用能力。.then(), .catch(), 和.finally()方法都会返回一个新的Promise对象。这意味着你可以在它们后面继续调用这些方法，形成一个链条。

一个.then()的回调函数可以返回一个值，这个值会作为下一个.then()的输入。它也可以返回一个新的Promise，这样下一个.then()就会等待这个新的Promise解决后才执行.

“`javascript
function fetchData(url) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (url === ‘data.json’) {
resolve({ id: 1, name: ‘商品列表’ });
} else {
reject(‘获取数据失败’);
}
}, 1000);
});
}

function processData(data) {
console.log(‘处理数据:’, data);
return { …data, processed: true }; // 返回一个新值
}

function saveProcessedData(processedData) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (processedData.processed) {
resolve(‘数据保存成功’);
} else {
reject(‘数据保存失败’);
}
}, 1500);
});
}

fetchData(‘data.json’)
.then(processData) // fetchData成功后，结果传给processData
.then(saveProcessedData) // processData返回的值传给saveProcessedData
.then(finalResult => {
console.log(‘最终结果:’, finalResult);
})
.catch(error => {
console.error(‘链中出现错误:’, error); // 链中任何一个环节出错都会被捕获
})
.finally(() => {
console.log(‘整个流程结束。’);
});
“`

这个例子比回调地狱清晰多了，对吧？错误处理也很方便，一个.catch()就能捕获整个链条中的错误。

Promise.all() 和 Promise.race()

除了单个Promise，JavaScript还提供了一些静态方法来处理多个Promise的场景。

Promise.all()：等待所有Promise完成

Promise.all()方法接收一个Promise数组（或者任何可迭代的Promise集合）作为输入。它会返回一个新的Promise。只有当数组中所有的Promise都成功（fulfilled）时，这个新的Promise才会成功。成功的结果是一个数组，里面包含了所有输入Promise的成功结果，并且顺序与输入的Promise顺序一致。

如果数组中哪怕有一个Promise失败（rejected）了，那么Promise.all()返回的Promise就会立即失败，并且失败的原因就是第一个失败的Promise的错误原因。

当你需要并行执行多个异步操作，并且只有当所有操作都成功后才能进行下一步时，Promise.all()就非常有用了.

“`javascript
const promise1 = Promise.resolve(3);
const promise2 = 42; // 非Promise值也会被Promise.all处理为已解决的Promise
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, ‘foo’);
});

Promise.all([promise1, promise2, promise3])
.then((values) => {
console.log(values); // 打印: [3, 42, “foo”]
})
.catch((error) => {
console.error(‘其中一个Promise失败了:’, error);
});

// 另一个例子，模拟多个API请求
function fetchUserData() {
return new Promise(resolve => setTimeout(() => resolve({ name: ‘张三’ }), 1000));
}

function fetchUserPosts() {
return new Promise(resolve => setTimeout(() => resolve([‘文章1’, ‘文章2’]), 1500));
}

Promise.all([fetchUserData(), fetchUserPosts()])
.then(([userData, userPosts]) => { // 使用数组解构获取结果
console.log(‘用户数据:’, userData);
console.log(‘用户文章:’, userPosts);
})
.catch(error => {
console.error(‘获取用户数据或文章失败:’, error);
});
“`

你看，Promise.all()让你能把多个独立的异步任务并行跑起来，等到它们都搞定了，你再统一处理结果.

Promise.race()：谁先完成就用谁的结果

Promise.race()方法也接收一个Promise数组作为输入，但它返回的Promise的行为完全不同。它会返回一个新的Promise，这个Promise会立即采纳数组中第一个“解决”（settled，也就是成功或失败）的Promise的结果或错误.

也就是说，谁跑得快，谁就赢。不管是成功还是失败，第一个有结果的Promise会决定Promise.race()的最终结果.

这个方法在你需要设置超时机制，或者需要从多个数据源获取数据，但只关心最快返回的结果时非常有用.

“`javascript
const promiseA = new Promise((resolve, reject) => {
setTimeout(() => resolve(‘Promise A 完成！’), 500);
});

const promiseB = new Promise((resolve, reject) => {
setTimeout(() => resolve(‘Promise B 完成！’), 100);
});

Promise.race([promiseA, promiseB])
.then((value) => {
console.log(value); // 打印: “Promise B 完成！” (因为它更快)
});

// 结合超时机制的例子
function fetchDataWithTimeout() {
const fetchPromise = new Promise(resolve => {
// 模拟一个较慢的网络请求
setTimeout(() => resolve(‘实际数据’), 3000);
});

const timeoutPromise = new Promise((resolve, reject) => {
// 设定一个2秒的超时
setTimeout(() => reject(new Error(‘请求超时了！’)), 2000);
});

return Promise.race([fetchPromise, timeoutPromise]);
}

fetchDataWithTimeout()
.then(data => console.log(‘数据:’, data))
.catch(error => console.error(‘错误:’, error.message)); // 2秒后会打印 “错误: 请求超时了！”
“`

通过Promise.race()，你可以轻松实现请求超时控制。

async/await：让异步代码像同步一样

虽然Promise链解决了“回调地狱”，但代码仍然是.then().then()这样的链式结构，有时候读起来还是有点“跳跃”。ES2017引入了async和await关键字，它们是Promise的语法糖，能让你用更像同步代码的方式来写异步代码.

• async关键字用于声明一个函数是异步函数。异步函数总是返回一个Promise.
• await关键字只能在async函数内部使用。它会暂停async函数的执行，直到它等待的Promise解决（resolve或reject）.

“`javascript
async function fetchAndProcessData() {
try {
const rawData = await fetchData(‘data.json’); // 等待fetchData完成
const processed = await processData(rawData); // 等待processData完成
const saveResult = await saveProcessedData(processed); // 等待saveProcessedData完成
console.log(‘最终结果 (async/await):’, saveResult);
} catch (error) {
console.error(‘发生错误 (async/await):’, error);
} finally {
console.log(‘整个流程结束 (async/await)。’);
}
}

fetchAndProcessData();
“`

是不是看起来就像普通的同步代码一样了？这就是async/await的魅力。它让Promise用起来更直观，更易读.

错误处理在async/await中就像同步代码一样，用try...catch语句。当await等待的Promise被拒绝时，它会抛出一个错误，这个错误可以被try...catch捕获。

你也可以结合Promise.all()和async/await来并行执行任务:

“`javascript
async function fetchMultipleResources() {
try {
const [userData, userPosts] = await Promise.all([
fetchUserData(),
fetchUserPosts()
]);
console.log(‘同时获取的用户数据:’, userData);
console.log(‘同时获取的用户文章:’, userPosts);
} catch (error) {
console.error(‘获取多个资源时出错:’, error);
}
}

fetchMultipleResources();
“`

这样写代码，既能享受到并行执行的效率，又能保持代码的线性可读性。

错误处理的最佳实践

1. 始终添加.catch()：就像前面说的，未处理的Promise拒绝会带来麻烦。链的最后加一个.catch()能捕获之前所有Promise的错误。
2. 避免深层嵌套.then()：这会让代码回到“回调地狱”的感觉。尽量保持链式调用扁平化。
3. 在async/await中使用try...catch：这是处理async函数中错误最直接有效的方式.
4. 抛出Error对象：当reject一个Promise时，最好抛出Error对象或者继承自Error的对象，这样可以获得更详细的错误堆栈信息.

Promise是现代JavaScript异步编程的基石。理解并熟练使用它，能让你的代码更健壮，更易于维护。从最基础的new Promise，到链式调用，再到Promise.all和Promise.race，最后到async/await，它们共同构成了JavaScript处理异步操作的强大工具集。希望这些解释能帮你更好地掌握它。