Promise 是 JavaScript 中处理异步操作的一种方式，它可以让我们更加优雅地处理回调地狱问题。在实际的开发中，我们经常需要处理多个 Promise，这时候就需要用到 Promise 的一些高级技巧。
本文将介绍如何在一个异步任务中交替处理多个 Promise，以及如何处理这些 Promise 的返回值。希望本文能够对前端开发者们有所帮助。
Promise 的基础知识
在介绍 Promise 如何交替处理多个 Promise 之前，我们先来回顾一下 Promise 的基础知识。
Promise 有三种状态：Pending（进行中）、Fulfilled（已成功）、Rejected（已失败）。当 Promise 执行完成后，它会处于 Fulfilled 或 Rejected 状态。
Promise 的基本用法如下：
// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
// 异步操作
// 如果成功了，调用 resolve()，并传入成功的结果
// 如果失败了，调用 reject()，并传入失败的原因
});
promise.then((result) => {
// 成功的回调函数
}).catch((reason) => {
// 失败的回调函数
});Promise.all()
Promise.all() 可以将多个 Promise 同时执行，并且当所有 Promise 都完成时，才会执行回调函数。
// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise1');
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise2');
}, 2000);
});
Promise.all([promise1, promise2]).then((results) => {
console.log(results); // ['promise1', 'promise2']
});Promise.race()
Promise.race() 可以将多个 Promise 同时执行，并且当有一个 Promise 完成时，就会执行回调函数。
// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise1');
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise2');
}, 2000);
});
Promise.race([promise1, promise2]).then((result) => {
console.log(result); // 'promise1'
});Promise 的交替处理
有时候，我们需要在一个异步任务中交替处理多个 Promise。比如，我们需要从服务器获取用户的信息和订单信息，然后根据这些信息生成一个页面。
// javascriptcn.com 代码示例
const getUserInfo = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: '张三',
age: 18,
});
}, 1000);
});
};
const getOrderInfo = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
id: '123456',
price: 100,
});
}, 2000);
});
};
const generatePage = (userInfo, orderInfo) => {
console.log(`姓名：${userInfo.name}`);
console.log(`年龄：${userInfo.age}`);
console.log(`订单号：${orderInfo.id}`);
console.log(`订单价格：${orderInfo.price}`);
};
const main = () => {
getUserInfo().then((userInfo) => {
getOrderInfo().then((orderInfo) => {
generatePage(userInfo, orderInfo);
});
});
};
main();上面的代码中，我们先获取了用户的信息，然后再获取订单的信息，最后将这些信息传给 generatePage() 函数生成页面。这种方式虽然可以实现功能，但是代码看起来不太优雅。
我们可以使用 Promise 的 then() 方法，将多个 Promise 连接起来，实现交替处理。
// javascriptcn.com 代码示例
const main = () => {
getUserInfo().then((userInfo) => {
return getOrderInfo().then((orderInfo) => {
return [userInfo, orderInfo];
});
}).then((results) => {
generatePage(results[0], results[1]);
});
};
main();上面的代码中，我们先获取用户的信息，然后在 then() 方法中获取订单的信息，并将这两个 Promise 的返回值封装成一个数组，最后将这个数组传给 generatePage() 函数生成页面。
Promise 的返回值处理
在实际的开发中，我们经常需要对 Promise 的返回值进行处理。比如，我们需要将多个 Promise 的返回值合并成一个数组或对象。
// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise1');
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise2');
}, 2000);
});
Promise.all([promise1, promise2]).then((results) => {
console.log(results); // ['promise1', 'promise2']
const obj = {};
results.forEach((result, index) => {
obj[`promise${index + 1}`] = result;
});
console.log(obj); // { promise1: 'promise1', promise2: 'promise2' }
});上面的代码中，我们使用 Promise.all() 将多个 Promise 同时执行，并将它们的返回值封装成一个数组。然后，我们使用 forEach() 方法将这个数组转换成一个对象。
总结
本文介绍了 Promise 如何在一个异步任务中交替处理多个 Promise，以及如何处理这些 Promise 的返回值。通过学习本文，我们可以更加优雅地处理多个异步操作，从而提高代码的可读性和可维护性。
代码示例：https://codepen.io/pen/GRjQyWQ
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656d3e69d2f5e1655d58cccd