Promise.all使用总结

总结自己在使用Promise.all()过程的经验

Promise.all 接收一个包含多个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。
这个新的 Promise 对象会在所有的 Promise 对象都成功完成后，才会被 resolve，如果其中任何一个 Promise 对象被 reject，那么整个 Promise.all 的返回结果也会被 reject。

使用 Promise.all 的好处之一是它能够同时处理多个异步操作，而不需要嵌套多个回调函数或使用复杂的控制流程。这使得代码更加简洁和易读。

使用场景：

1、 并行请求：当前一个页面需要同时发起多个异步请求，并且在所有请求完成后才能进行下一步操作，可以使用 Promise.all。通过将多个请求包装成 Promise 对象，并使用 Promise.all 来等待它们全部完成，可以提高页面加载速度和用户体验。

2、数据依赖关系：当某个操作依赖于多个异步操作的结果，可以使用 Promise.all 来等待这些操作全部完成。

3、图片预加载：在需要预加载多张图片的场景中，可以使用 Promise.all 来等待所有图片加载完成后再进行下一步操作。

在下面的示例中，我们创建了三个 Promise 对象，每个 Promise 对象都模拟了一个异步操作。然后，我们使用 Promise.all 将这三个 Promise 对象包装成一个新的 Promise 对象。当所有的 Promise 对象都成功完成后，Promise.all 返回一个包含所有结果的数组。在这个示例中，最终的结果是一个包含三个字符串的数组。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 resolved');
  }, 2000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2 resolved');
  }, 3000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 3 resolved');
  }, 1500);
});

Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results);
    // Output: ['Promise 1 resolved', 'Promise 2 resolved', 'Promise 3 resolved']
  })
  .catch(error => {
    console.log(error);
  });

注意：
Promise.all 只有在所有的 Promise 对象都成功完成（reslove的结果） 后才会返回结果，如果其中任何一个 Promise 对象被 reject，整个 Promise.all 的返回结果也会被 reject。因此，在使用 Promise.all 时，需要确保所有的异步操作都能成功完成，或者通过 catch 方法来处理异常情况。

下面是一个通过catch 方法处理异常的例子：我们的需求是不管所有请求是否成功，是否能拿到数据，前端都需要构造符合结构的数据保证页面正常渲染。

// 定义promise数组
const promiseArr = [];
// 自己封装的请求接口
const httpRequestArr= [httpRequest1, httpRequest2, httpRequest3, httpRequest4]
 
  for (const i in httpRequestArr) {
    promiseArr.push(
      (async () => {
        return httpRequestArr[i]()
          .then((res) => {
            	// 处理接口返回结果，接口调用成功，不需要处理就直接resolve()结果
              return Promise.resolve({ ...res });
            }
          })
          .catch(() => {
          // 处理接口异常的情况 如果希望reject的时候，promise.all()仍然将结果自定义返回，需要 Promise.resolve()处理数据，否则 promise.all()会返回reject的请求结果。
            return Promise.resolve({
           //自己构造需要的数据作为异常情况下的返回结果
              success: true,
              message: '',
              data: {},
            });
          });
      })(),
    );
  }

  Promise.all(promiseArr).then((res) => {
      console.log('全部请求完成！Promise返回结果', res);
      }).catch((err) => {
      console.log('Promise返回err', err);
    });