ES6 中的 Promise.all() 典型应用详解-JavaScript中文网-JavaScript教程资源分享门户

Promise.all() 是 ES6 中的一个重要的函数，它可以并行地执行多个异步操作，并在它们全部执行完毕后返回一个 resolved 状态的 Promise 对象，同时包含多个异步操作的结果。

在前端开发中，Promise.all() 的应用非常广泛，比如同时请求多个 API 接口并获取它们的数据，或者在一张页面上显示多个数据源的信息等。

Promise.all() 的用法

Promise.all() 接收一个由 Promise 对象组成的数组作为参数，会在数组中的所有 Promise 对象都被 fulfilled 时返回一个 resolved 状态的 Promise 对象。如果在其中任何一个 Promise 对象被 rejected 时，Promise.all() 就会立即返回一个 rejected 状态的 Promise 对象，并返回第一个被 rejected 的 Promise 对象的值。

下面是 Promise.all() 的用法示例：

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

Promise.all() 的典型应用

同时请求多个 API 接口并获取它们的数据

在前端开发中，我们经常需要同时请求多个 API 接口，获取它们的数据，并在获取所有数据后将它们合并在一起。这种情况下，Promise.all() 就非常适合。我们可以将每个请求封装成一个 Promise 对象，并将所有 Promise 对象添加到一个数组中。然后可以调用 Promise.all() 函数来等待所有 Promise 对象完成，并将所有数据合并成一个对象返回。

示例代码如下所示：

// javascriptcn.com 代码示例
const fetchUserData = fetch('https://api.example.com/user')
  .then(response => response.json())

const fetchOrderData = fetch('https://api.example.com/order')
  .then(response => response.json())

const fetchProductData = fetch('https://api.example.com/product')
  .then(response => response.json())

Promise.all([fetchUserData, fetchOrderData, fetchProductData])
  .then(([userData, orderData, productData]) => {
    const data = {
      user: userData,
      order: orderData,
      product: productData
    }
    console.log(data)
  })
  .catch(error => {
    console.log(error)
  })

在一张页面上显示多个数据源的信息

在开发一些需要同时使用多个数据源的页面时，Promise.all() 可以帮助我们在所有数据都获取到后再将其展示在页面上。例如，我们需要同时获取用户数据和订单数据来展示在一个用户信息页面中，这时可以将获取数据封装成 Promise 对象，并将其添加到 Promise.all() 中来等待所有数据获取完成并在获取所有数据后将其合并并展示在页面上。

示例代码如下所示：

// javascriptcn.com 代码示例
const fetchUserData = fetch('https://api.example.com/user')
  .then(response => response.json())

const fetchOrderData = fetch('https://api.example.com/order')
  .then(response => response.json())

Promise.all([fetchUserData, fetchOrderData])
  .then(([userData, orderData]) => {
    const userHTMLElement = document.createElement('div')
    userHTMLElement.innerHTML = `<span>${userData.name}</span><span>${userData.email}</span>`

    const orderHTMLElement = document.createElement('div')
    orderHTMLElement.innerHTML = `<span>${orderData.orderNumber}</span><span>${orderData.orderTime}</span>`

    const userInfoHTMLElement = document.getElementById('userInfo')
    userInfoHTMLElement.appendChild(userHTMLElement)
    userInfoHTMLElement.appendChild(orderHTMLElement)
  })
  .catch(error => {
    console.log(error)
  })

总结

通过使用 Promise.all()，我们可以方便地并行执行多个异步操作，并在它们全部执行完毕后将它们合并成一个对象或数组来统一管理。在前端开发中，Promise.all() 的应用非常广泛，我们可以通过上述示例代码来开发一个更高效和易于维护的应用程序。

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