# Promise.all

使用場景：假設我們希望許多 Promise 並行執行，並等待它們都準備好。

一個實際例子是：並行下載多個 URL，並在這些 URL 全部下載完成後，再進行後續的業務邏輯處理。

語法：

```javascript
let promise = Promise.all(iterable);
```

Promise.all 接受一個 `iterable 物件`（通常是一組 Promise）並返回一個新的 Promise.

當所有列出的 Promise 都 resolve 後，新的 Promise 也將 resolve，並且它們的結果陣列成為新的 Promise 物件的結果。

例如，下面的 Promise.all 在 3 秒後狀態變為 `fulfilled`，然後它的結果是一個陣列 [1, 2, 3]：

```javascript
Promise.all([
  new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
  new Promise(resolve => setTimeout(() => resolve(3), 1000))  // 3
]).then(alert); // 1,2,3 when promises are ready: each promise contributes an array member
```

請注意，結果陣列成員的順序與其源承諾中的順序相同。 儘管第一個 Promise 需要最長的時間來解決，但它仍然是結果陣列中的第一個。

一個常見的技巧是將一組作業資料對映到一組 Promise 中，然後將其包裝到 Promise.all 中。

例如，如果我們有一個 URL 陣列，我們可以像這樣獲取它們：

```javascript
let urls = [
  'https://api.github.com/users/iliakan',
  'https://api.github.com/users/remy',
  'https://api.github.com/users/jeresig'
];

// map every url to the promise of the fetch
let requests = urls.map(url => fetch(url));

// Promise.all waits until all jobs are resolved
Promise.all(requests)
  .then(responses => responses.forEach(
    response => alert(`${response.url}: ${response.status}`)
  ));
```

在偵錯程式裡，看到 requests 陣列最開始的三個元素，狀態全是 pending：

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

看到 requests 變成 狀態後，傳入 then 的結果陣列：

一旦執行到 then 方法之後，狀態變為 fulfilled：

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

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

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

一個實際的使用 Promise.all 一次併發讀取多個 Github user 記錄的例子：

```javascript
let names = ['iliakan', 'remy', 'jeresig'];

let requests = names.map(name => fetch(`https://api.github.com/users/${name}`));

Promise.all(requests)
  .then(responses => {
    // all responses are resolved successfully
    for(let response of responses) {
      alert(`${response.url}: ${response.status}`); // shows 200 for every url
    }

return responses;
  })
  // map array of responses into an array of response.json() to read their content
  .then(responses => Promise.all(responses.map(r => r.json())))
  // all JSON answers are parsed: "users" is the array of them
  .then(users => users.forEach(user => alert(user.name)));
```

Promise 靜態 API 的使用方法

相關文章