Promise.all 静态方法

  1. 合并多个 Promise 对象,等待所有同时成功完成(或某一个失败),做后续逻辑
    请添加图片描述
  2. 语法:
<script>
	const p = Promise.all([Promise对象, Promise对象, ...])
	p.then(result => {
	  // result 结果: [Promise对象成功结果, Promise对象成功结果, ...]
	}).catch(error => {
	  // 第一个失败的 Promise 对象,抛出的异常对象
	})
</script>
  1. 需求。同时请求:“北京”、“上海”、“广州”、“深圳”的天气并在网页尽可能同时显示
    请添加图片描述
  2. 核心代码如下:
<!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
    */
    // 1. 请求城市天气,得到Promise对象
    const bjPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '110100' } })
    const shPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '310100' } })
    const gzPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440100' } })
    const szPromise = axios({ url: 'http://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 => {
      console.dir(error)
    })
  </script>
</body>

</html>
<think>好的,用户想了解Promise.all的用法,需要JavaScript的示例。首先,我得回忆一下Promise.all的基本概念和用途。根据引用[3],Promise.all是处理多个Promise对象的方法,返回一个新的Promise。当所有输入的Promise都成功时,这个新Promise才会成功,结果数组顺序和输入一致。如果有任何一个失败,立即失败,返回第一个失败的原因。 用户可能需要知道如何正确使用它,比如如何处理多个异步操作,等待它们全部完成。示例代码很重要,应该展示成功和失败的情况。引用[2]中的示例已经展示了成功的情况,但可能还需要补充一个失败的例子,这样用户更清楚错误处理。 接下来,我需要确保代码语法正确,比如使用箭头函数、正确的参数传递。同时,解释每个步骤的作用,比如Promise.resolve的作用,以及setTimeout模拟异步操作。还要提到结果数组的顺序与传入的Promise顺序一致,这点在引用[3]里也有提到。 用户可能不清楚为什么需要Promise.all,所以需要说明它的应用场景,比如同时请求多个API,等待所有数据到达后再处理。同时,错误处理部分需要强调.catch的作用,任何一个Promise失败就会触发。 还需要注意引用标注,在回答中提到的关键点后面添加对应的引用标识,比如[^3]。此外,生成的相关问题要围绕常见疑惑,比如与Promise.race的区别、错误处理技巧、返回结果顺序等。 最后检查是否符合格式要求,行内公式用$,独立公式用$$,但这个问题可能不涉及数学公式,所以可能不需要。回答结构要清晰,分步骤说明,代码示例单独成块,附有解释。这样用户能逐步理解Promise.all的使用方法。</think>### Promise.all 使用方法详解 Promise.all 是 JavaScript 中用于行处理多个 Promise静态方法,其核心特性总结为: 1. **行执行**:所有 Promise 同时执行,而非顺序执行 2. **全成功则成功**:当所有 Promise 都成功时返回结果数组 3. **快速失败**:任意一个 Promise 失败则立即抛出错误 #### 基础用法示例 ```javascript // 创建三个不同类型的 Promise const fetchUser = Promise.resolve({ name: "Alice", id: 1 }); const fetchOrders = new Promise((resolve) => setTimeout(() => resolve([101, 102]), 500)); const checkInventory = Promise.resolve(true); Promise.all([fetchUser, fetchOrders, checkInventory]) .then(([userData, orders, inventoryStatus]) => { console.log("用户数据:", userData); console.log("订单列表:", orders); console.log("库存状态:", inventoryStatus); }) .catch(error => { console.error("操作失败:", error); }); ``` 输出结果: ``` 用户数据: {name: "Alice", id: 1} 订单列表: [101, 102] 库存状态: true ``` #### 错误处理场景 ```javascript const successPromise = Promise.resolve("成功"); const failingPromise = Promise.reject("错误原因"); Promise.all([successPromise, failingPromise]) .then(results => { console.log(results); // 不会执行 }) .catch(error => { console.error("捕获到错误:", error); // 输出: 捕获到错误: 错误原因 }); ``` #### 关键特性说明表 | 特性 | 说明 | |-----------------------|----------------------------------------------------------------------| | 输入类型 | 可迭代对象(如数组) | | 返回值 | 新的 Promise 对象 | | 成功条件 | 所有 Promise 都成功 | | 失败条件 | 任意一个 Promise 失败 | | 结果顺序 | 与输入顺序严格一致 | | 典型应用场景 | 请求多个接口数据、批量文件上传、多源数据验证 |
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值