ES12 中的新式 Promise.all 方法详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步编程是常见的操作方式。而 Promise 成为了异步编程的重要解决方案。ES6 中引入了 Promise，而在 ES12 中，推出了 Promise.all 方法，更方便地处理异步操作。本篇文章将介绍 ES12 新式 Promise.all 方法的相关知识点，详细介绍该方法的使用方式，以及实际应用场景。

Promise.all 方法简介

Promise.all 方法是 JavaScript 中 Promise 对象的一个扩展方法。Promise.all 接收一个 Promise 对象数组作为参数，并且只有在数组中所有 Promise 对象都被 resolve 后，才会执行回调函数。如果数组中有一个 Promise 对象 reject 了，Promise.all 方法会立即按照 reject 的返回值返回一个新的 Promise 对象。

Promise.all 方法的语法如下：

Promise.all(iterable)

其中 iterable 是一个可以迭代的其他对象，如 Array 或者 Set。

Promise.all 方法使用示例

下面是一个简单的使用 Promise.all 方法的示例代码：

// javascriptcn.com 代码示例
let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 is resolved');
  }, 1000);
});

let promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2 is resolved');
  }, 1500);
});

let promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 3 is resolved');
  }, 500);
});

Promise.all([promise1, promise2, promise3]).then((results) => {
  console.log(results);
}).catch((error) => {
  console.error(error);
});

在上述代码中，我们定义了三个 Promise 对象 promise1，promise2 和 promise3，其中每个 Promise 对象的 resolve 回调都会分别在不同的时间内执行。使用 Promise.all 方法调用这三个 Promise 后，Promise.all 方法会在所有 Promise 对象都 resolve 后执行回调函数。该示例中 Promise.all 方法会在 1500 毫秒之后输出以下信息：

["Promise 1 is resolved", "Promise 2 is resolved", "Promise 3 is resolved"]

这三个 Promise 的 resolve 结果都存储在数组中返回。

为了了解 Promise.all 方法的应用场景，我们可以来看一个更加实际的案例。

Promise.all 方法的实际应用场景

Promise.all 方法最适合用来处理执行多个异步操作并且数量不确定时返回结果的情况。例如，我们有以下代码：

// javascriptcn.com 代码示例
const fetchJSON = (url) => {
  return fetch(url)
    .then(response => {
      if (response.ok) {
        return response.json();
      }

      throw new Error('Network response was not ok');
    })
};

fetchJSON('url1').then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

fetchJSON('url2').then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

fetchJSON('url3').then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

在上述代码中，我们有三个请求接口的异步操作，分别使用了 fetchJSON 方法处理请求和返回结果。但是，这种写法并不优雅，且无法同时获取所有异步请求的结果。如果我们需要同时获取这三个请求的结果，使用 Promise.all 方法会更为简单。

改进版的代码如下：

Promise.all([fetchJSON('url1'), fetchJSON('url2'), fetchJSON('url3')]).then(([result1, result2, result3]) => {
  console.log(result1, result2, result3);
}).catch(error => {
  console.error(error);
});

使用 Promise.all 方法，我们只需要在数组中声明需要执行的异步操作，即可同时获取所有操作执行后返回的结果。

总结

Promise.all 方法可以更加灵活的处理 JavaScript 中的异步编程，同时达到了优化代码的目的。现代的前端开发中，Promise 是解决异步编程问题的主要方式之一，掌握 Promise.all 方法的使用能更好地帮助开发者完成多个异步请求的并发操作。

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