這是 MDN 上面的常見錯誤範例，當中包含幾個錯，算是前面幾篇的統整：

/* 錯誤示範 */
doSomething()
    .then(function (result) {
        doSomethingElse(result).then((newResult) => doThirdThing(newResult));
    })
    .then(() => doFourthThing());

第一個問題是在 doSomethingElse 使用了 promise 卻沒有回傳，導致鏈接斷掉。在這樣的情況下，doFourthThing 和 doSomethingElse/ doThirdThing 會像兩條獨立的鏈接同時並行，造成非預期結果。

除了上述問題，非必要的巢狀結構也容易造成錯誤漏接。然後當然就是要鏈接中加上錯誤處理。

改寫：

doSomething()
  .then((result) => doSomethingElse(result))
  .then((newResult) => doThirdThing(newResult))
  .then(() => doFourthThing()) // 不一定要操作前面回傳的結果 可以只是接著處理別的事情 
  .catch((error) => console.error(error));

除此之外，async/ await 也是一種解決方案，後面會寫到。

這幾天蠻頻繁寫到巢狀的問題，雖然理論上可以理解，但總覺得平常很多時候結構並沒有寫的很平，所以用力思考了一下實務中的情境。我覺得應該可以說，「執行不同非同步任務」時不建議巢狀，因為這樣確實會不太靈活、不好抓錯。但單純就「串聯 then」這件事而言，蠻常會因為要統一整理資料或更新共同的 store 而將一部分 then 和 catch 接在內層。這部分可能再想想。