Promise.all、Promise.allSettled根据两个接口请求的结果进行逻辑处理

概述：页面中有两个tab页面，根据接口1和接口2的返回结果，判断默认显示哪一个tab页面。

接口1	接口2	默认显示tab
show1:true	show2:true	tab1
show1:true	show2:false	tab1
show1:false	show2:true	tab2

// 接口1
const p1 = new Promise((resolve, reject) => {
        // 模拟发请求
        setTimeout(() => {
          if(成功){
            resolve('show1:true');
          }else {
            reject('show1:false');
          }
        }, 1000);

      })
      .then(value => {
        return value;
      })
      .catch(error => {
        return error;
      })

//接口2
      const p2 = new Promise((resolve, reject) => {
        // 模拟发请求
        setTimeout(() => {
          if(失败){
            resolve('show2:true');
          }else {
            reject('show2:false');
          }
        }, 2000);
      })
      .then(value => {
        return value
      })
      .catch(error => {
        return error
      })

方法一：使用Promise.all 

const p = Promise.all([p1, p2, p3]);

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

• Promise.all()方法接受一个数组作为参数，
• p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。
• 另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

p的状态由p1、p2、p3决定，分成两种情况。

1. 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
2. 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

    const promise = [p1, p2];
    Promise.all(promise)
      .then(value => {
        console.log("all then", value)
      })
      .catch(error => {
           console.log(error)
       })

• p1会resolved，p2首先会rejected
• 但是p2有自己的catch方法，该方法返回的是一个新的 Promise 实例，p2指向的实际上是这个实例。
• 该实例执行完catch方法后，也会变成resolved，导致Promise.all()方法参数里面的两个实例都会resolved
• 因此会调用promise.all的then方法指定的回调函数，而不会调用catch方法指定的回调函数   

2s后输出结果： 

promise.all输出结果与数组中书写顺序有关（promise = [p1, p2]），与结果返回的先后无关；数组中p1在p2前面，但是p1的结果返回是2s后、p1结果返回为1s后，promise.all的then输出结果还是p1在前。

方法二：使用Promise.allSettled

Promise.allSettled()方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例。

只有等到所有这些参数实例都返回结果，不管是fulfilled还是rejected，包装实例才会结束。

该方法返回的新的 Promise 实例，一旦结束，状态总是fulfilled，不会变成rejected。状态变成fulfilled后，Promise 的监听函数接收到的参数是一个数组，每个成员对应一个传入Promise.allSettled()的 Promise 实例。

// p1、p2同上
const allSettledPromise = Promise.allSettled([p1, p2]);
    // Promise.allSettled 得到的新实例状态只会是 `fulfilled`
    allSettledPromise.then(function (results) {
      //注意,这是 `fulfilled` 的回调函数,只有其状态为成功才能进到这里
      console.log(results); 
    });

• Promise.allSettled()的返回值allSettledPromise，状态只可能变成fulfilled(注意,是 allSettledPromise 的状态,而不是内部的promise实例)
• 它的监听函数接收到的参数是数组results。该数组的每个成员都是一个对象，对应的是传入Promise.allSettled()的 Promise 实例。
• 每个对象都有status属性，该属性的值只可能是字符串fulfilled或字符串rejected。
• fulfilled时，对象有value属性，rejected时有reason属性，对应两种状态的返回值。

输出结果：

 这里p2返回的为reject()，但是返回结果还是‘fulfilled’，这是因为p2里面有.catch()去处理了reject()，当p2没有写.catch()时，返回结果为：{status:'rejected',reason:'show2:false'}