Promise.all方法使用场景

例如：用户点击按钮，会向服务器请求数据，但是数据分别是不同的后端接口获取的数据，需要展示在一个span中
如果用户还没请求完成 则span会显示加载中...
等待两个后端接口都返回了数据 才会将数据展示在span 中

   <div class="content"><button class="btn">开始请求多组数据</button><span class="text"></span></div>const btn = document.querySelector('.btn');const text = document.querySelector('.text');// 请求数据的接口1function getData1() {return new Promise((resolve, reject) => {setTimeout(() => {return resolve('getData1')}, 1000)})}// 请求数据的接口2function 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。
• 这样我们可以取到不同接口的所有数据。