Promise.then詳解

一、Promisethen返回值

在JavaScript中，Promise對象是解決非同步編程的一種解決方案，它的優點在於可以讓代碼更加簡潔，使得回調函數嵌套的問題得到解決。而then方法是Promise對象中最重要的一個方法。它接收兩個參數，一個是成功時的回調函數，一個是失敗時的回調函數。在調用了then方法後，它將返回一個新的Promise對象，這個新Promise對象的狀態和值是由當前Promise對象所完成的操作結果決定的。

let p = new Promise((resolve, reject) => {
  resolve('成功');
});

p.then(res => {
  console.log(res); // 輸出：成功
});

在上述代碼中，promise對象p調用了then方法，因為p對象狀態為resolve，所以會執行then方法的成功回調函數，並返回一個新的Promise對象q對象。在成功的回調函數里列印出結果「成功」，因此輸出的結果是「成功」。

二、Promisethenl

在then方法的回調函數中，我們可以繼續返回一個新的Promise對象，這就是then鏈的概念。返回的新的Promise對象狀態和值決定了下一個then方法回調函數的執行，我們稱之為Promise的鏈式調用。

let p = new Promise((resolve, reject) => {
  resolve('成功');
});

p.then(res => {
  console.log(res);  // 輸出：成功
  return '返回成功';
}).then(res => {
  console.log(res);  // 輸出：返回成功
});

在上面的例子中，在第一個then返回的新的Promise對象的狀態為resolve，並返回了值「返回成功」，因此將會執行第二個then的回調函數，並輸出返回值為「返回成功」。這便是Promise的鏈式調用。

三、Promisethen的參數

在Promise.then方法中，除了可以接收成功和失敗的回調函數之外，還可以接收第二個參數，即當前Promise對象錯誤時的回調函數。

let p = new Promise((resolve, reject) => {
  reject('出現錯誤');
});

p.then(res => {
  console.log(res);
}, err => {
  console.log(err);  // 輸出：出現錯誤
});

在上述代碼中，Promise對象p在創建時reject了一個值為「出現錯誤」的錯誤對象，因此會執行then方法中的錯誤回調函數，列印出錯誤值為「出現錯誤」。

四、Promisethen裡面的方法自動執行

在Promise的then鏈中，除了可以返回一個新的Promise對象，還可以返回一個普通的值（非Promise對象）或者是一個返回值為Promise對象的函數，這個返回值為Promise對象的函數，將會被自動調用執行。

let p = new Promise((resolve, reject) => {
  resolve('成功');
});

p.then(res => {
  console.log(res);  // 輸出：成功
  return new Promise((resolve, reject) => {
     setTimeout(() => {
      resolve('兩秒後成功');
    }, 2000);
  });
}).then(res => {
  console.log(res);  // 輸出：兩秒後成功
});

在上述代碼中，成功回調函數返回了一個延時為2秒的Promise對象，當這個Promise對象狀態為resolve時，將繼續執行下一個then方法的回調函數列印出值「兩秒後成功」。這裡可以看到返回值為Promise對象的函數才會自動調用執行，而普通值並沒有這個效果。

五、Promisethen和catch結合

在Promise的鏈式調用中，如果一個then方法里的回調函數出現了異常或者是返回了一個reject結果，那麼這個異常或者reject結果並不會觸發下一個then方法中的錯誤回調函數，而是需要將錯誤回調函數放到這個出錯的then以及之前的then的結尾，並使用catch方法進行統一的處理。

let p = new Promise((resolve, reject) => {
  resolve('成功');
});

p.then(res => {
  console.log(res);  // 輸出：成功
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('兩秒後失敗');
    }, 2000);
  });
}).then(res => {
  console.log(res);  // 沒有執行
}).catch(err => {
  console.log(err);  // 輸出：兩秒後失敗
});

在上述代碼中，第一個then中的延時的Promise狀態為reject，並且返回了錯誤值「兩秒後失敗」，因此執行了catch方法中的錯誤回調函數，列印出錯誤值「兩秒後失敗」。