程式碼如下：

```javascript
// Make a request for user.json
fetch('/article/promise-chaining/user.json')
  // Load it as json
  .then(response => response.json())
  // Make a request to GitHub
  .then(user => fetch(`https://api.github.com/users/${user.name}`))
  // Load the response as json
  .then(response => response.json())
  // Show the avatar image (githubUser.avatar_url) for 3 seconds (maybe animate it)
  .then(githubUser => {
    let img = document.createElement('img');
    img.src = githubUser.avatar_url;
    img.className = "promise-avatar-example";
    document.body.append(img);

setTimeout(() => img.remove(), 3000); // (*)
  });
```

這裡的語義比較清楚，每一個 then 呼叫都返回一個 Promise，後續的 then 呼叫，必須在前一個 then 呼叫返回的 Promise 被 resolve 之後，才能得到執行。

不過上述程式碼有一個缺陷：

看 `*` 所在行的程式碼：在頭像完成顯示並被移除後，如果我們想新增一些額外的處理邏輯，應該怎麼做？ 例如，我們想顯示一個用於編輯該使用者或其他內容的表單。

為了使鏈可擴充套件，我們需要返回一個在頭像完成顯示時進行 resolve 的 Promise.

程式碼如下：

```javascript
fetch('/article/promise-chaining/user.json')
  .then(response => response.json())
  .then(user => fetch(`https://api.github.com/users/${user.name}`))
  .then(response => response.json())
  .then(githubUser => new Promise(function(resolve, reject) { // (*)
    let img = document.createElement('img');
    img.src = githubUser.avatar_url;
    img.className = "promise-avatar-example";
    document.body.append(img);

setTimeout(() => {
      img.remove();
      resolve(githubUser); // (**)
    }, 3000);
  }))
  // triggers after 3 seconds
  .then(githubUser => alert(`Finished showing ${githubUser.name}`));
```
也就是說，(*) 行中的 .then 處理程式現在返回新的 Promise，該 Promise 僅在 setTimeout (**) 中的 resolve(githubUser) 呼叫後才被解決。 鏈中的下一個 .then 將等待它。

下圖第 5 行新建的 Promise 物件，這個物件在第 13 行會 resolve，這個 resolve 操作，會觸發等待它的第 17 行的 then 方法。
![](https://img-blog.csdnimg.cn/img_convert/cc3d2c3ac5c6c542820d583842167829.png)

作為一種好的實踐，非同步操作應始終返回一個 Promise. 這使得在它之後的計劃行動成為可能；即使我們現在不打算擴充套件鏈，我們以後也可能需要它。

最後我們對程式碼進行重構。

```javascript
function loadJson(url) {
  return fetch(url)
    .then(response => response.json());
}
```

以上的函式返回一個 Promise，當 response 的 json 資料可用時，這個 promise 後註冊的 `.then` 函式就會觸發。

看其消費程式碼：

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

26 行 then 裡的箭頭函式觸發時，user 就是 25 行 user.json 資料被反序列化之後形成的 JSON 物件。

```javascript
function loadGithubUser(name) {
  return loadJson(`https://api.github.com/users/${name}`);
}
```

只是對 loadJson 的一層封裝，讓呼叫者不需要知道 Github user api 具體的 endpoint.

```javascript
function showAvatar(githubUser) {
  return new Promise(function(resolve, reject) {
    let img = document.createElement('img');
    img.src = githubUser.avatar_url;
    img.className = "promise-avatar-example";
    document.body.append(img);

setTimeout(() => {
      img.remove();
      resolve(githubUser);
    }, 3000);
  });
}
```

返回一個 Promise，在其 executor 裡書寫業務邏輯，並透過 resolve(githubUser) 將 Promise 狀態設定為 fulfilled，方便將來的擴充套件。

最後的完整程式碼：

```javascript
// Use them:
loadJson('/article/promise-chaining/user.json')
  .then(user => loadGithubUser(user.name))
  .then(showAvatar)
  .then(githubUser => alert(`Finished showing ${githubUser.name}`));
  // ...
```

# 總結

如果 .then（或 catch/finally，無關緊要）處理程式返回一個 Promise，則 Promise 鏈的其餘部分會一直等待，直到這個 pending 的 Promise 被 resolve. 當 Promise 內部的 executor 有資料被 resolve 呼叫時，resolve 輸入的資料（或錯誤）會被進一步傳遞到 Promise chain 裡的其他 Promise.then 中去。

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

使用 JavaScript Promise 讀取 Github 某使用者的資料

相關文章