JavaScript高级(十五)----promise.all

Promise.all方法使用场景

复制代码
例如:用户点击按钮,会向服务器请求数据,但是数据分别是不同的后端接口获取的数据,需要展示在一个span中
如果用户还没请求完成 则span会显示加载中...
等待两个后端接口都返回了数据 才会将数据展示在span 中
javascript 复制代码
   <div class="content">
      <button class="btn">开始请求多组数据</button>
      <span class="text"></span>
   </div>


    const btn = document.querySelector('.btn');
    const text = document.querySelector('.text');

    // 请求数据的接口1
    function getData1() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          return resolve('getData1')
        }, 1000)
      })
    }

    // 请求数据的接口2
    function getData2() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          return resolve('getData2')
        }, 3000)
      })
    }

    btn.addEventListener('click', async () => {
      // 如果用户还没请求完成 则span会显示加载中
      text.innerHTML = '加载中.....'

      try {
        const res1 = await getData1();
        const res2 = await getData2();
        Promise.all([res1, res2])
          // 如果向后端请求的数据 全部请求成功 则把数据渲染到页面上
          .then(res => {
            let strHtml = '';
            res.forEach(item => strHtml += item)
            text.innerHTML = strHtml;
          })
      } catch (err) {
        // 如果reject被执行 会到 catch里面来 .. 可以执行相应的代码
        text.innerHTML = `某个接口请求失败,数据无法渲染`;
        console.log('某一个后端接口请求失败', err)
      }
    })

Promise.all

  • 接收的是数组,得到的结果也是数组,并且一一对应,也可以理解为Promise.all照顾跑的最慢的,最慢的跑完才结束。
  • 只有当所有 Promise 实例都变成 fulfilled 状态,新 Promise 的状态才是 fulfilled 状态,返回所有 promise 实例的 resolve value 数组。
  • 如果有一个 Promise 实例状态是 rejected 状态,则新 Promise 的状态是 rejected,返回第一个 promise reject 的 reason。
  • 这样我们可以取到不同接口的所有数据。
相关推荐
慕斯策划一场流浪几秒前
fastGPT—nextjs—mongoose—团队管理之部门相关api接口实现
前端·javascript·html·fastgpt部门创建·fastgpt团队管理·fastgpt部门成员更新·fastgpt部门成员创建
小诸葛的博客28 分钟前
client-go如何监听自定义资源
开发语言·后端·golang
入 梦皆星河28 分钟前
go原理刨析之channel
开发语言·后端·golang
Pandaconda33 分钟前
【新人系列】Golang 入门(十二):指针和结构体 - 上
开发语言·后端·golang·go·指针·结构体·后端开发
6<735 分钟前
【go】类型断言
开发语言·后端·golang
旷野本野1 小时前
【Java】Maven
java·开发语言·maven
我自纵横20231 小时前
事件处理程序
开发语言·前端·javascript·css·json·ecmascript
坊钰1 小时前
【MySQL 数据库】数据类型
java·开发语言·前端·数据库·学习·mysql·html
拉不动的猪2 小时前
刷刷题50(vue3)
前端·javascript·面试
网安小陈2 小时前
【网安】处理项目中的一些常见漏洞bug(java相关)
java·开发语言·数据库·安全·web安全·网络安全·bug