看一個實際的例子：

```javascript
loadScript("/article/promise-chaining/one.js")
  .then(function(script) {
    return loadScript("/article/promise-chaining/two.js");
  })
  .then(function(script) {
    return loadScript("/article/promise-chaining/three.js");
  })
  .then(function(script) {
    // use functions declared in scripts
    // to show that they indeed loaded
    one();
    two();
    three();
  });
```

按照先後順序，依次載入 one.js, two.js, three.js

當然也可以使用箭頭函式的語法：

```javascript
loadScript("/article/promise-chaining/one.js")
  .then(script => loadScript("/article/promise-chaining/two.js"))
  .then(script => loadScript("/article/promise-chaining/three.js"))
  .then(script => {
    // scripts are loaded, we can use functions declared there
    one();
    two();
    three();
  });
```

這裡每個 loadScript 呼叫，都會返回一個 promise，這個新的 promise，在其被 resolve 時，會觸發下一個 `.then` 的執行。

於是它開始載入下一個指令碼。 所以指令碼一個接一個地載入。

我們可以向鏈中新增更多非同步操作。 請注意，程式碼仍然是 `flat` 的——它向下增長，而不是向右增長。

這種方式沒有 `pyramid of doom` 的跡象。

雖然我們可以在 then 後面直接呼叫 loadScript：

```javascript
loadScript("/article/promise-chaining/one.js").then(script1 => {
  loadScript("/article/promise-chaining/two.js").then(script2 => {
    loadScript("/article/promise-chaining/three.js").then(script3 => {
      // this function has access to variables script1, script2 and script3
      one();
      two();
      three();
    });
  });
});
```

此程式碼的作用相同：依次載入 3 個指令碼。 但它 `向右增長`, 所以本質上仍然有`回撥地獄`的問題。

# Thenables 物件

準確地說，then 處理程式可能返回的不完全是一個 Promise，而是一個所謂的 `thenable` 物件——一個具有 .then 方法的任意 JavaScript 物件。 它將被視為與 Promise 相同的方式被處理。

這個想法是第 3 方庫可以實現自己的 `promise-compatible` 物件。 它們可以有一組擴充套件的方法，但也可以與原生 Promise 相容，因為它們實現了 .then。

看一個例子：

```javascript
class Thenable {
  constructor(num) {
    this.num = num;
  }
  then(resolve, reject) {
    alert(resolve); // function() { native code }
    // resolve with this.num*2 after the 1 second
    setTimeout(() => resolve(this.num * 2), 1000); // (**)
  }
}

new Promise(resolve => resolve(1))
  .then(result => {
    return new Thenable(result); // (*)
  })
  .then(alert); // shows 2 after 1000ms
```

單步除錯：

1. 14 行 new Promise 內部的 executor 得到執行，立即 resolve，丟擲 result 1

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

2. 這會導致程式碼第 15 行 then 裡的函式立即被呼叫，輸入引數為 1，構造一個新的 Thenable 物件。

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

JavaScript 在第 16 行中檢查 .then 處理程式返回的物件：如果它有一個名為 then 的可呼叫方法，那麼它呼叫該 `then` 方法，並提供本地函式 resolve、reject 作為引數（類似於執行程式）並等待其中一個被呼叫。 在上面的示例中，resolve(2) 在 1 秒 (**) 後被呼叫。然後將結果進一步向下傳遞。

因此，下圖第 16 行程式碼單步除錯之後，會自動進入程式碼第 8 行。

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

3. 列印出 resolve 原生函式的 native code 字串。

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

4. 程式碼第 10 行的 resolve，會觸發第 18 行第二個 then 方法：

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

JavaScript 在 Promise.then 方法裡返回新的 Promise

相關文章