Promise的all方法

在JavaScript中，Promise对象是用于处理异步操作的核心工具。特别是当我们需要同时处理多个异步操作时，Promise.all()方法非常有用，它可以将多个Promise对象合并成一个新的Promise，并且只有当所有的Promise都成功时，才会执行成功的回调，否则会执行失败的回调。

本例说明：

在本例中，我们通过调用axios发送多个请求，获取不同城市的天气信息，并通过Promise.all()方法并行处理所有请求。这种方法适合用在我们需要同一时间显示多个请求结果的场景。

代码说明

HTML部分（文件名：index.html）

<!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>
    /**
     * 目标：掌握Promise的all方法作用，和使用场景
     * 业务：当我需要同一时间显示多个请求的结果时，就要把多请求合并
     * 例如：默认显示"北京", "上海", "广州", "深圳"的天气在首页查看
     * code：
     * 北京-110100
     * 上海-310100
     * 广州-440100
     * 深圳-440300
    */

    // 深圳
    const city1 = axios({url: 'http://hmajax.itheima.net/api/weather',params: {city: '440300'}})
    // 广州
    const city2 = axios({url: 'http://hmajax.itheima.net/api/weather',params: {city: '440100'}})
    // 上海
    const city3 = axios({url: 'http://hmajax.itheima.net/api/weather',params: {city: '310100'}})
    // 北京
    const city4 = axios({url: 'http://hmajax.itheima.net/api/weather',params: {city: '110100'}})

    // 使用Promise.all来并行请求所有城市的天气数据
    const p = Promise.all([city1, city2, city3, city4])

    // 如果所有请求成功，则处理返回结果
    p.then(result => {
      console.log(result);
      const cityStr = result.map(item => {
        return `<li>${item.data.data.area}-----${item.data.data.windPower}-----${item.data.data.windDirection}</li>`    
      }).join('')
      document.querySelector('.my-ul').innerHTML = cityStr
    }).catch(error => {
      console.dir(error);
    })
  </script>
</body>
</html>

代码解析：

引入外部资源：
- 使用了axios库来发送异步请求，获取天气数据。axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js。
四个axios请求：
- city1, city2, city3, city4分别是对深圳、广州、上海和北京的天气信息请求。
- 每个请求都返回一个Promise对象。
Promise.all方法：
- Promise.all([city1, city2, city3, city4])将所有的Promise对象合并成一个新的Promise。
- Promise.all只有在所有Promise都成功时才会执行then回调，否则执行catch回调。
处理返回结果：
- 一旦所有请求成功，then方法会被触发，result数组包含了每个请求的响应数据。
- 使用map方法遍历返回结果，并将每个城市的天气信息插入到<ul>标签中。
错误处理：
- 如果其中任何一个请求失败，catch回调会捕获错误并打印错误信息。

运行结果：

当你打开这个HTML页面时，浏览器会自动向服务器发送请求获取深圳、广州、上海和北京的天气信息。当所有请求都成功返回数据时，页面上会显示这些城市的天气信息：

城市名称
风力（windPower）
风向（windDirection）

结果会以<ul>列表的形式显示在页面上，每个城市的数据都会展示为一个<li>项。

总结：

Promise.all()是一个非常有用的方法，尤其在需要并行处理多个异步操作时，可以将多个异步操作的结果汇总到一起。
在实际开发中，使用Promise.all()能够提高性能，并且使得代码更加简洁和可读。

Promise的all方法

代码说明

代码解析：

运行结果：

总结：

悦读