ES10中Promise.all的新特性

随着前端技术的不断发展，ES10中的Promise.all方法已经被广泛使用。但是很多人可能并不知道，Promise.all方法在ES10中也有了新的特性。

什么是Promise.all方法？

Promise.all方法是ES6中引入的方法之一，它可以接受一个Promise数组作为参数，将所有的Promise对象封装成一个新的Promise对象，等待所有的Promise对象都完成后才会resolve。如果其中一个Promise对象reject了，则整个Promise.all也会reject。

Promise.all的新特性

在ES10中，Promise.all方法支持传入一个可迭代对象，而不仅仅是一个Promise数组。这意味着我们可以将任何可迭代对象作为参数传递给Promise.all方法，例如Set对象、Map对象、字符串、甚至是自定义的可迭代对象。

下面是一个例子，我们将一个Set对象作为参数传递给Promise.all方法：

const set = new Set([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)]);

Promise.all(set).then(values => {
  console.log(values); // [1, 2, 3]
});

我们还可以将一个字符串作为参数传递给Promise.all方法：

const str = 'hello world';

Promise.all(str).then(values => {
  console.log(values); // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']
});

Promise.all的应用场景

Promise.all方法在实际开发中有很多应用场景，例如：

并行请求多个接口数据

const urls = ['https://api.example.com/user', 'https://api.example.com/role'];

Promise.all(urls.map(url => fetch(url)))
  .then(responses => Promise.all(responses.map(res => res.json())))
  .then(data => {
    const [user, role] = data;
    console.log(user, role);
  });

并行处理多个任务

const tasks = [asyncTask1(), asyncTask2(), asyncTask3()];

Promise.all(tasks).then(results => {
  console.log(results);
});

等待所有的动画结束后再执行下一步操作

const animations = [elem1.animate(keyframes1, options), elem2.animate(keyframes2, options)];

Promise.all(animations.map(animation => animation.finished)).then(() => {
  console.log('All animations finished');
});

总结

ES10中的Promise.all方法支持传入一个可迭代对象，我们可以将任何可迭代对象作为参数传递给Promise.all方法。这个新特性使得Promise.all方法更加灵活，可以应用于更多的场景中。

在实际开发中，我们可以使用Promise.all方法并行请求多个接口数据、并行处理多个任务、等待所有的动画结束后再执行下一步操作等。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65840a64d2f5e1655ded3e8c