Promise.all用法詳解

一、作用及基本用法

1、Promise.all用於將多個Promise實例包裝成一個新的Promise實例。

2、當所有的Promise實例都成功時新的Promise實例才會成功，其中任意一個Promise實例失敗，新的Promise實例就會失敗。此時Promise.all返回的Promise實例的值是第一個失敗Promise實例的錯誤信息。

3、基本用法如下所示：

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // [1, 2, 3]
});

二、Promise.all實現並發執行

1、Promise.all可以實現並發執行，提高了程序的性能，如下所示：

// 順序執行
function sequential() {
  Promise.resolve(1)
    .then(console.log)
    .then(() => Promise.resolve(2).then(console.log))
    .then(() => Promise.resolve(3).then(console.log));
}

// 並發執行
function concurrent() {
  Promise.all([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)])
    .then(console.log);
}

sequential(); // 1 2 3
concurrent(); // 1 2 3

2、在並發執行的過程中，Promise.all會同時執行所有的Promise實例，等待所有Promise實例都完成後再返回結果。

三、Promise.all處理異步請求

1、Promise.all可以優雅地處理多個異步請求，如下所示：

async function getUsers() {
  const userIds = await fetch('/users');
  const usersPromises = userIds.map(id => fetch(`/user/${id}`));
  const users = await Promise.all(usersPromises);
  return users;
}

2、在上面的例子中，首先從服務器獲取所有用戶的ID，接着通過map方法將所有的用戶ID轉化為一個個異步請求，並將這些請求的Promise實例存儲在一個數組中。最後，使用Promise.all同時發起所有異步請求，等待所有請求完成後再將結果返回。

四、Promise.all陷阱及避免方式

1、Promise.all可能陷入死等待，如果其中一個異步請求沒有響應，Promise.all會一直處於等待狀態而無法返回結果。

2、避免方式如下：

Promise.all(promises.map(p => p.catch(() => undefined)))
  .then(results => {
    // 處理結果
  });

3、在上面的例子中，通過在每個Promise實例後面添加一個catch方法，將錯誤值變成undefined，確保了Promise.all會在所有異步請求完成後返回結果。當然，這個方式會隱藏Promise實例的錯誤信息，如需要獲取錯誤信息需要注意。