深入理解Promise.all

当使用 Promise 处理多个异步操作时，有时候我们需要等待所有操作都完成后再进行下一步操作。Promise.all 就是一个工具，它可以接收一个 Promise 对象数组作为参数，并返回一个新的 Promise 对象，当所有的 Promise 对象都成功返回时，该 Promise 对象的状态为“成功”（fulfilled），返回值是一个数组，数组元素按照 Promise 对象数组的顺序排列；如果有任意一个Promise对象失败，则该 Promise 对象的状态为“失败”（rejected）。

使用 Promise.all 一般需要注意以下几点：

1. 理解 Promise.all 的返回结果

如前面所述，Promise.all 的返回结果是一个 Promise 对象，该对象的状态及返回值与包含的 Promise 对象一致。具体来说，当所有 Promise 对象都成功返回时，该 Promise 对象的状态为“成功”（fulfilled），返回值是一个数组，数组元素按照 Promise 对象数组的顺序排列；如果有任意一个 Promise 对象失败，则该 Promise 对象的状态为“失败”（rejected），其返回值是第一个被拒绝的 Promise 对象的拒绝原因。

1. 理解 Promise.all 对 Promise数组执行的顺序

Promise.all 对接收到的 Promise 数组中的 Promise 对象执行顺序并没有明确定义，即便一个 Promise 对象的状态先变成“完成”，Promise.all 也不能保证你得到的结果数组中该 Promise 对象要排在前面。这需要我们在代码中自己保证 Promise 数组中每个 Promise 对象的执行顺序。

接下来，我给出两个示例来详细讲解 Promise.all 的使用：

示例一

假设有两个异步操作，需要先执行一个获取用户信息的操作，再执行一个获取订单信息的操作，两个异步操作都完成时，我们需要将用户信息和订单信息拼接成一个对象并返回。代码实现如下：

const getUserInfo = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      const userInfo = {
        name: 'Jack',
        age: 20
      }
      resolve(userInfo)
    }, 1000)
  })
}

const getOrderInfo = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      const orderInfo = {
        orderId: '1234',
        price: 100
      }
      resolve(orderInfo)
    }, 500)
  })
}

Promise.all([getUserInfo(), getOrderInfo()]).then(([userInfo, orderInfo]) => {
  const result = {
    ...userInfo,
    ...orderInfo
  }
  console.log(result)  // 输出：{name: "Jack", age: 20, orderId: "1234", price: 100}
})

代码中，我们先定义了两个获取异步操作的函数 getUserInfo 和 getOrderInfo，然后使用 Promise.all() 将两个函数返回的 Promise 对象作为数组参数传递给它。最后在 Promise.all() 的回调函数中得到 Promise 对象数组对应的返回值 （该值是一个数组），并拼装成一个包含用户信息和订单信息的对象。

示例二

现在我们有一个需求，需要获取几个API的数据，并将它们的数据结果按顺序拼接起来。代码实现如下：

const axios = require('axios')

const getApiOneData = () => {
  return axios.get('http://api.one.com/data')
}

const getApiTwoData = () => {
  return axios.get('http://api.two.com/data')
}

const getApiThreeData = () => {
  return axios.get('http://api.three.com/data')
}

Promise.all([
  getApiOneData(),
  getApiTwoData(),
  getApiThreeData()
]).then(([apiOneRes, apiTwoRes, apiThreeRes]) => {
  const data = `${apiOneRes.data}${apiTwoRes.data}${apiThreeRes.data}`
  console.log(data)
})

代码中，我们使用 axios 库发送了三个不同的 API 请求，并将返回的 Promise 对象作为数组参数传递给 Promise.all()。当三个 API 请求都完成时，Promise.all() 的回调函数会得到 Promise 对象数组的 resolved 的值，并将三个 API 请求返回数据的结果拼接在一起并输出。