javascript：Promise.all静态方法

听海边涛声

于 2024-07-15 18:10:55 发布

阅读量194

点赞数 2

文章标签： javascript 前端 Promise

本文链接：https://blog.csdn.net/panghuangang/article/details/140440355

版权

介绍

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Promise.all() 静态方法接受一个 Promise 可迭代对象作为输入，并返回一个 Promise。当所有输入的 Promise 都被兑现时，返回的 Promise 也将被兑现（即使传入的是一个空的可迭代对象），并返回一个包含所有兑现值的数组。如果输入的任何 Promise 被拒绝，则返回的 Promise 将被拒绝，并带有第一个被拒绝的原因。

Promise.all() 的作用：合并多个Promise对象，等待所有成功完成（或某一个失败），再做后续逻辑处理。
如果几个Promise都成功，合并后的大Promise才是成功，结果数组顺序和合并时顺序一致
如果几个Prose有一个失败，合并后的大Promise就是失败状态

在这里插入图片描述

语法：

const p = Promise.all([Promise对象1, Promise对象2, ...])
p.then(result => {
  // result结果：[Promise对象1成功结果, Promise对象2成功结果, ...]
}).catch(error => {
  // 第一个失败的Promise对象抛出的异常
})

示例

几个Promise都请求成功，结果数组的顺序和合并时顺序相同

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise的all方法</title>
</head>

<body>
  <ul class="my-ul"></ul>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 例如：默认显示"北京", "上海", "广州", "深圳"的天气在首页查看
     * code：
     * 北京-110100
     * 上海-310100
     * 广州-440100
     * 深圳-440300
    */
    //  1. 请求城市天气，返回Promise对象
    // 北京的Promise
    const bjPromise = axios({ url: 'https://hmajax.itheima.net/api/weather', params: { city: '110100' } })
    // 上海的Promise
    const shPromise = axios({ url: 'https://hmajax.itheima.net/api/weather', params: { city: '310100' } })
    // 广州的Promise
    const gzPromise = axios({ url: 'https://hmajax.itheima.net/api/weather', params: { city: '440100' } })
    // 深圳的Promise
    const szPromise = axios({ url: 'https://hmajax.itheima.net/api/weather', params: { city: '440300' } })

    // 2. 使用Promise.all静态方法，来合并多个Promise
    const p = Promise.all([bjPromise, shPromise, gzPromise, szPromise])
    p.then(result => {
      // 结果数组顺序和合并时顺序一致
      console.log(result)
    }).catch(error => {
      log.dir(error)
    })
  </script>
</body>

</html>

在这里插入图片描述

展开每个：
在这里插入图片描述

几个Promise都成功以后，合并使用它们的数据

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise的all方法</title>
</head>

<body>
  <ul class="my-ul"></ul>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 例如：默认显示"北京", "上海", "广州", "深圳"的天气在首页查看
     * code：
     * 北京-110100
     * 上海-310100
     * 广州-440100
     * 深圳-440300
    */
    //  1. 请求城市天气，返回Promise对象
    // 北京的Promise
    const bjPromise = axios({ url: 'https://hmajax.itheima.net/api/weather', params: { city: '110100' } })
    // 上海的Promise
    const shPromise = axios({ url: 'https://hmajax.itheima.net/api/weather', params: { city: '310100' } })
    // 广州的Promise
    const gzPromise = axios({ url: 'https://hmajax.itheima.net/api/weather', params: { city: '440100' } })
    // 深圳的Promise
    const szPromise = axios({ url: 'https://hmajax.itheima.net/api/weather', params: { city: '440300' } })

    // 2. 使用Promise.all静态方法，来合并多个Promise
    const p = Promise.all([bjPromise, shPromise, gzPromise, szPromise])
    p.then(result => {
      // 结果数组顺序和合并时顺序一致
      console.log(result)
      const htmlStr = result.map(item => {
        return `<li>${item.data.data.area} ---${item.data.data.weather}</li>`
      }).join('')
      document.querySelector('.my-ul').innerHTML = htmlStr
    }).catch(error => {
      log.dir(error)
    })
  </script>
</body>

</html>

在这里插入图片描述

有一个Promise失败

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise的all方法</title>
</head>

<body>
  <ul class="my-ul"></ul>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 例如：默认显示"北京", "上海", "广州", "深圳"的天气在首页查看
     * code：
     * 北京-110100
     * 上海-310100
     * 广州-440100
     * 深圳-440300
    */
    //  1. 请求城市天气，返回Promise对象
    // 北京的Promise
    const bjPromise = axios({ url: 'https://hmajax.itheima.net/api/weather', params: { city: '110100' } })
    // 上海的Promise
    const shPromise = axios({ url: 'https://hmajax.itheima.net/api/weather', params: { city: '310100' } })
    // 广州的Promise
    const gzPromise = axios({ url: 'https://hmajax.itheima.net/api/weather3', params: { city: '440100' } })
    // 深圳的Promise
    const szPromise = axios({ url: 'https://hmajax.itheima.net/api/weather', params: { city: '440300' } })

    // 2. 使用Promise.all静态方法，来合并多个Promise
    const p = Promise.all([bjPromise, shPromise, gzPromise, szPromise])
    p.then(result => {
      // 结果数组顺序和合并时顺序一致
      console.log(result)
      const htmlStr = result.map(item => {
        return `<li>${item.data.data.area} ---${item.data.data.weather}</li>`
      }).join('')
      document.querySelector('.my-ul').innerHTML = htmlStr
    }).catch(error => {
      log.dir(error)
    })
  </script>
</body>

</html>