問題描述：

頁面掛掉了，因為接口異常導致，打開瀏覽器調(diào)試了一下，發(fā)現(xiàn)只是一個無關緊要的接口掛掉了。那么一個接口掛掉了為什么會導致整個頁面無數(shù)據(jù)呢？了解Promise.all都知道，如果參數(shù)中 promise 有一個失敗（rejected），此實例回調(diào)失敗（reject），就不再執(zhí)行then方法回調(diào)

Promise.all詳情資料可查看：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Promise.all([p1, p2, p3])
  .then(res => {
    this.data1 = res[0]
    this.data2 = res[1] // 這個數(shù)據(jù)拿不到，接口掛掉了
    this.data3 = res[2]
  })
  .catch((err) => {console.error(err)})

如果參數(shù)中 promise 有一個（p2）失?。╮ejected），此實例回調(diào)失?。╮eject），就不再執(zhí)行then方法回調(diào)，被catch掉了，打印了reject結果。

image.png

當然，也可以不使用Promise.all，但如果多個接口之間需要同步進行，后一個接口依賴前一個接口的返回值，這種情況做同步處理就麻煩一點了。

但是，使用Promise.all，如果有一個回調(diào)執(zhí)行失敗，即使其他幾個promise已經(jīng)進入resolved狀態(tài)，then也不會執(zhí)行的，或者可以說所有的promise都失敗了（都不能正常取到響應結果）

正如我遇到的問題：也許可能只是一個不關鍵的數(shù)據(jù)加載失敗，其他所有的數(shù)據(jù)也不會顯示，使得項目的容錯大大降低。

分析到這里，我相信大家什么時候使用Promise.all都有一些判斷了，我個人認為有以下情況：幾個異步操作是強相關的，后續(xù)步驟必須依賴這幾個步驟全部成功才能進行。

下面是我的解決辦法：

var p1 =new Promise(function(resolve,reject){
    setTimeout(function(){
        resolve(1);
    },2000)
});
var p2 = new Promise(function(resolve,reject){
          API.fetchData().then((res) => {
            resolve(res);
          }, () => {
            resolve(null); // 防止不關鍵的數(shù)據(jù)加載失敗，影響頁面顯示
          })
    });
var p3 = new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve(3);
        },2000)
    });
Promise.all([p1, p2, p3]).then(function (results) {
    console.log("success");
    console.log(results);
}).catch(function(r){
    console.log("err");
    console.log(r);
});