Promise.all, async, await - JavaScript

JavaScript 是一种面向对象的语言，它支持并行和异步操作。Promise.all, async, await 是 JavaScript 中常用的异步操作方式，本文将介绍它们的用法和区别。

Promise.all

在 JavaScript 中使用 Promise.all 可以将多个 Promise 对象组合成单个 Promise 对象，且所有子 Promise 对象异步执行。Promise.all 的返回值是一个 Promise 对象，当所有子 Promise 对象全部完成时，它的状态才会发生改变。其语法如下：

Promise.all([p1, p2, p3, ...])

其中 p1, p2, p3, ...是多个 Promise 对象，Promise.all 会等待所有的子 Promise 对象全部完成后再执行后续的操作。

以下是一个简单的例子，使用 Promise.all 来加载多个图片文件：

const img1 = new Promise((resolve, reject) => {
  const img = new Image();
  img.onload = () => resolve('Image 1 loaded');
  img.onerror = () => reject('Error loading image');
  img.src = 'image1.png';
});
const img2 = new Promise((resolve, reject) => {
  const img = new Image();
  img.onload = () => resolve('Image 2 loaded');
  img.onerror = () => reject('Error loading image');
  img.src = 'image2.png';
});

Promise.all([img1, img2])
  .then(results => console.log(results))
  .catch(error => console.error(error));

async/await

async/await 是 ES2017 的新特性，用于简化 Promise 对象的使用。它可以让异步的代码看起来像同步的代码，更加易于理解和维护。async 表示异步操作，返回值是一个 Promise 对象；await 表示等待异步操作完成，并返回异步操作的结果。事实上，async/await 是基于 Promise 来实现的。以下是一个示例：

async function getData() {
  const result1 = await fetch('http://api.example.com/data1');
  const json1 = await result1.json();
  const result2 = await fetch('http://api.example.com/data2?id=' + json1.id);
  const json2 = await result2.json();
  return { data1: json1, data2: json2 };
}
getData().then(data => console.log(data));

上面的代码中，getData 函数使用 async 关键字声明为异步函数。在函数体中，使用 await 等待异步操作完成，然后将结果存储在变量中。最后返回包含两个异步操作结果的对象，并使用 then 方法处理结果。

区别

Promise.all 和 async/await 都是用于处理异步操作的方式，它们之间的区别在于 Promise.all 是将多个 Promise 对象组合起来，而 async/await 是基于 Promise 对象实现的。Promise.all 会一次性执行所有子 Promise 对象，而 async/await 是按照顺序依次执行异步操作。

在编写时，Promise.all 适用于需要同时加载或处理多个异步操作的场景；而 async/await 主要适用于需要按照顺序执行异步操作的场景，它可以让异步操作看起来像同步操作，更加易于理解和调试。

以上是 Promise.all, async, await 的介绍，希望可以帮助读者更好地理解和使用 JavaScript 异步编程的方式。