巢狀回撥函式經常用在兩個邏輯上具有先後順序的非同步操作場景中。

思考下面的問題：我們如何按順序載入兩個指令碼？

自然的解決方案是將第二個 loadScript 呼叫放在回撥中，如下所示：

```javascript
loadScript('/my/script.js', function(script) {

alert(`Cool, the ${script.src} is loaded, let's load one more`);

loadScript('/my/script2.js', function(script) {
    alert(`Cool, the second script is loaded`);
  });

});
```

外層 loadScript 完成後，回撥啟動內層的 loadScript 呼叫。

如果我們想要順序載入更多的指令碼，該怎麼辦？

```javascript
loadScript('/my/script.js', function(script) {

loadScript('/my/script2.js', function(script) {

loadScript('/my/script3.js', function(script) {
      // ...continue after all scripts are loaded
    });

});

});
```
# 關於回撥引數的出錯處理

在上面的例子中，我們沒有考慮錯誤。 如果指令碼載入失敗怎麼辦？ 我們的回撥應該能夠對此做出反應。

這是一個改進的 loadScript 版本，可以跟蹤載入錯誤：

```javascript
function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;

script.onload = () => callback(null, script);
  script.onerror = () => callback(new Error(`Script load error for ${src}`));

document.head.append(script);
}
```
它呼叫 callback(null, script) 成功載入，否則呼叫 callback(error)。

消費程式碼：

```javascript
loadScript('/my/script.js', function(error, script) {
  if (error) {
    // handle error
  } else {
    // script loaded successfully
  }
});
```

我們用於 loadScript 的方法實際上很常見。 它被稱為“錯誤優先回撥(error-first callback)”風格。

約定是：

如果發生錯誤，回撥的第一個引數是為錯誤保留的。 然後回撥（錯誤）被呼叫。

第二個引數（如果需要，還有下一個引數）用於成功的結果。 然後呼叫 callback(null, result1, result2…)。

因此，單個回撥函式用於報告錯誤和傳回結果。

# Pyramid of Doom

乍一看，巢狀回撥函式看起來像是一種可行的非同步編碼方法。 確實如此。 對於一個或兩個巢狀呼叫，其複雜度尚在程式設計人員能夠掌控的範圍內。

但是對於一個接一個的多個非同步操作，我們會有這樣的程式碼：

```javascript
loadScript('1.js', function(error, script) {

if (error) {
    handleError(error);
  } else {
    // ...
    loadScript('2.js', function(error, script) {
      if (error) {
        handleError(error);
      } else {
        // ...
        loadScript('3.js', function(error, script) {
          if (error) {
            handleError(error);
          } else {
            // ...continue after all scripts are loaded (*)
          }
        });

}
    });
  }
});
```

隨著呼叫變得更加巢狀，程式碼變得更深並且越來越難以管理，特別是如果我們有真正的程式碼而不是......可能包括更多的迴圈、條件語句等。

這有時被稱為 `回撥地獄` 或 `末日金字塔`。

![](https://img-blog.csdnimg.cn/img_convert/50f34f1336051d3485f9ee3bec2bb8cf.png)

巢狀呼叫的“金字塔”隨著每個非同步操作而向右增長。 很快它就失去了控制。

我們可以把每個匿名回撥函式，改寫成為由名稱的標準函式，來部分程度的規避回撥地獄問題：

```javascript
loadScript('1.js', step1);

function step1(error, script) {
  if (error) {
    handleError(error);
  } else {
    // ...
    loadScript('2.js', step2);
  }
}

function step2(error, script) {
  if (error) {
    handleError(error);
  } else {
    // ...
    loadScript('3.js', step3);
  }
}

function step3(error, script) {
  if (error) {
    handleError(error);
  } else {
    // ...continue after all scripts are loaded (*)
  }
}
```
我們使用 JavaScript 提供的 promise，可以從根本上規避回撥地獄問題。

JavaScript 非同步操作裡的巢狀回撥函式

相關文章