Promise.all() 一个前端面试问题，一个页面被遮罩住，直到接收完10个请求后才会显示，怎么判断请求全部被接收了？

一个前端面试问题，一个页面被遮罩住，直到接收完10个请求后才会显示，怎么判断请求全部被接收了？

//以下代码，可直接复制到浏览器控制台运行。
//代码展示的是 request3 最慢，也就是 3s 后，才能拿到所有数据。
//可以将任意一个 request 的 resolve() 改成 reject，就会发现返回的是错误信息了

const request1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1)
  }, 1000)
})
const request2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(2)
  }, 1000)
})
const request3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(3)
  }, 3000)
})
const request4 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(4)
  }, 1000)
})
const request5 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(5)
  }, 1000)
})

const fun = async () => {
  const result = await Promise.all([request1, request2, request3, request4, request5])
  console.log(result)      //[1, 2, 3, 4, 5]
}
fun()

Promise.all()
1，全部 promise 执行结果为 fulfilled 时，then() 方法执行
2，只要有一个 promise 执行结果为 rejected 时，catch() 方法执行
3，注意，不会再等待其他的 promise 执行了，直接返回第一个执行为 rejected 的结果。

Promise.allSettled()
1，无论每个 promise 执行结果是 fulfilled 还是 rejected，总是会等待所有的（最慢的） promise 执行完毕，并且拿到所有的结果。

image.png