以下是使用 Promise.all()
处理异步并发操作的详细步骤和示例:
基本语法
Promise.all()
方法接受一个包含多个Promise对象的数组作为参数,其语法格式为:Promise.all([promise1, promise2,..., promiseN])
,它会并行地执行这些Promise,并返回一个新的Promise。
处理成功情况
- 当数组中的所有Promise都成功地转变为
fulfilled
状态时,Promise.all()
返回的新Promise才会变为fulfilled
,并将所有Promise的成功结果按照数组顺序组成一个新的数组作为最终结果传递给.then()
方法的回调函数。 - 示例代码如下:
const promise1 = new Promise((resolve) => setTimeout(() => resolve('数据1'), 1000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve('数据2'), 2000));
const promise3 = new Promise((resolve) => setTimeout(() => resolve('数据3'), 1500));
Promise.all([promise1, promise2, promise3])
.then((results) => {
console.log('所有请求都成功,结果为:', results);
});
在上述示例中,promise1
、promise2
和 promise3
分别在不同的时间后成功,Promise.all()
会等待所有的Promise都成功后,将它们的结果组成数组 ['数据1', '数据2', '数据3']
传递给 .then()
方法的回调函数进行打印。
处理失败情况
- 只要数组中有一个Promise被
rejected
,那么Promise.all()
返回的新Promise就会立即变为rejected
,并将第一个被rejected
的Promise的错误信息传递给.catch()
方法的回调函数。 - 示例代码如下:
const promiseA = new Promise((resolve) => setTimeout(() => resolve('A成功'), 2000));
const promiseB = new Promise((resolve, reject) => setTimeout(() => reject('B失败'), 1500));
const promiseC = new Promise((resolve) => setTimeout(() => resolve('C成功'), 1000));
Promise.all([promiseA, promiseB, promiseC])
.catch((error) => {
console.log('有请求失败,错误为:', error);
});
在上述示例中,由于 promiseB
会在 1500 毫秒时失败,所以 Promise.all()
返回的Promise会立即变为 rejected
,并执行 .catch()
方法打印出 B失败
。
应用场景举例
- 同时获取多个接口数据:在实际开发中,常常需要同时调用多个接口来获取不同的数据,然后在所有数据都获取到后进行统一处理。例如,一个页面需要展示用户信息、文章列表和评论列表,这三个数据分别来自不同的接口,可以使用
Promise.all()
来同时发起这三个接口的请求,然后在所有请求都成功返回后,将数据整合并渲染到页面上。
const getUserInfo = () => new Promise((resolve) => setTimeout(() => resolve({
name: '张三', age: 25 }), 1000));
const getArticleList = () => new Promise((resolve) => setTimeout(() => resolve(['文章1', '文章2', '文章3']), 1500));
const getCommentList = () => new Promise((resolve) => setTimeout(() => resolve(['评论1', '评论2']), 1200));
Promise.all([getUserInfo(), getArticleList(), getCommentList()])
.then(([userInfo, articleList, commentList]) => {
console.log('用户信息:', userInfo);
console.log('文章列表:', articleList);
console.log('评论列表:', commentList);
// 在这里可以进行页面渲染等操作,将数据展示到页面上
})
.catch((error) => {
console.log('获取数据出错:', error);
});
在上述示例中,通过 Promise.all()
同时发起了三个获取数据的Promise操作,当所有数据都获取成功后,在 .then()
方法中对数据进行了打印和后续的处理。
- 并行执行多个异步任务并汇总结果:除了获取接口数据,还可以用于并行执行多个其他类型的异步任务,如文件读取、数据处理等,并将各个任务的结果汇总起来进行进一步的操作。例如,需要同时读取多个文件的内容,然后将这些内容合并成一个字符串。
const fs = require('fs').promises;
const readFile1 = () => fs.readFile('file1.txt', 'utf8');
const readFile2 = () => fs.readFile('file2.txt', 'utf8');
const readFile3 = () => fs.readFile('file3.txt', 'utf8');
Promise.all([readFile1(), readFile2(), readFile3()])
.then(([content1, content2, content3]) => {
const combinedContent = content1 + content2 + content3;
console.log('合并后的文件内容:', combinedContent);
// 可以对合并后的内容进行进一步处理,如写入新的文件等
})
.catch((error) => {
console.log('读取文件出错:', error);
});
在上述示例中,使用 Promise.all()
并行地读取了三个文件的内容,然后将它们合并成一个字符串并进行了打印。
使用 Promise.all()
可以方便地处理多个异步并发操作,提高代码的执行效率和可读性,同时通过统一的 .catch()
方法能够有效地处理异步操作中的错误,确保程序的稳定性。