在JavaScript中，我们经常需要做多异步相关的事情。

我想用这篇文章来展示几个使用连续和并行的promise做多异步相关事情的例子。

例子1："Wait a second" x 3

第一个例子，让我们定义一个“wait a second ” function，连续使用三次。

这个function将被连续调用三次。

然后，我么将会并行地调用三次"wait a second" function。

这个function将被并行调用。

function wait(waitTime) {
  return new Promise(resolve => setTimeout(() => {
    console.log(`waited ${waitTime} ms`)
    resolve()
  }, waitTime));
}

async function serial() {
  console.time('serial');
  await wait(1000);
  await wait(1000);
  await wait(1000);
  console.timeEnd('serial');
}

async function parallel() {
  console.time('parallel');
  await Promise.all([
    wait(1000),
    wait(1000),
    wait(1000)
  ])
  console.timeEnd('parallel');
}

async function test() {
  await serial();
  await parallel();
}

test();

输入：

waited 1000 ms
waited 1000 ms
waited 1000 ms
serial: 3016.319ms
waited 1000 ms
waited 1000 ms
waited 1000 ms
parallel: 1003.017ms

从上面的输入中可以看出来，Promise.all让我们同时调用所有的"wait a second"。

例子2：添加两个异步数字

在上面的例子中，我们将等待一秒钟。在这个例子中，我们将异步获取两个数字，并且将它们用连续和并行的方式加到一起。

function randomNumber() {
  const rand = Math.random() * 100;
  return new Promise(resolve => setTimeout(() => {
    resolve(rand)
  }, 1000))
}

async function addExampleSerial() {
  console.time('add-serial');
  const number1 = await randomNumber();
  const number2 = await randomNumber();
  const result = number1 + number2;
  console.timeEnd('add-serial');
  console.log('serial result: ', result);
}

async function addExampleParallel() {
  console.time('add-parallel');
  const [number1, number2] = await Promise.all([randomNumber(), randomNumber()]);
  const result = number1 + number2;
  console.timeEnd('add-parallel');
  console.log('parallel result: ', result);
}

async function test() {
  await addExampleSerial();
  await addExampleParallel();
}

test();

输出：

add-serial: 2005.019ms
serial result: 59.0316729944722
add-parallel: 1000.616ms
parallel result: 48.7190841367634

例子3：需要的数据依赖

最后一个例子中，我需要将从异步的返回值里取到的数字加进去，但是我们仍然没有一个这样的例子：一个异步获取的值是另外的异步获取数值所依赖的参数。

在这个例子中，我们将获取我们的username，然后我们将获取两段信息，这两段信息是依赖我们的username的。

function fetchData(data) {
  return new Promise(resolve => setTimeout(() => {
    resolve(data)
  }, 1000))
}

function getLoggedInUser() {
  return fetchData('user1');
}

async function getDataForUser(userName) {
  const profileData = await fetchData({
    user1: {name: 'Micah', points: 100},
    user2: {name: 'someone else', point: 200}
  });
  return profileData[userName];
}

async function getUserPosts(userName) {
  const posts = await fetchData({
    user1: ['Promises Post'],
    user2: ['Streams Post']
  });
  return posts[userName];
}

async function userDataSerial() {
  console.time('userData-serial');
  const userName = await getLoggedInUser();
  const userData = await getDataForUser(userName);
  const userPosts = await getUserPosts(userName);
  console.timeEnd('userData-serial');
}

async function userDataParallel() {
  console.time('userData-parallel');
  const userName = await getLoggedInUser();
  const [userData, userPosts] = await Promise.all([
    getDataForUser(userName),
    getUserPosts(userName)
  ])
  console.timeEnd('userData-parallel');
}

async function test() {
  await userDataSerial();
  await userDataParallel();
}

test();

输出：

userData-serial: 3007.785ms
userData-parallel: 2006.665ms

结论

为了优化你的代码的执行速度，将注意力集中到那些需要数据来做调用的地方，然后调整代码结构，尽可能多地将获取的那些依赖使用Promise.all()并行执行。

注意：在一些点上，你可能试图一次执行太多的异步操作。现在，你需要决定你可以做多少个，然后创建这么多的一批，防止失败。