TypeScript 中使用 Promise.all 的使用技巧及示例代码-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要处理异步操作。而 Promise 是一种解决异步编程的方案。在 TypeScript 中，我们可以使用 Promise.all 来同时处理多个异步操作。本文将介绍 Promise.all 的使用技巧及示例代码，帮助读者更好地理解和应用 Promise。

Promise.all 简介

Promise.all 是一个将多个 Promise 实例包装成一个新的 Promise 实例的方法。它接收一个包含多个 Promise 实例的数组作为参数，并返回一个新的 Promise 实例。当数组中所有的 Promise 实例都成功时，新的 Promise 实例才会成功；当数组中有一个 Promise 实例失败时，新的 Promise 实例就会失败。

Promise.all 的使用技巧

1. 处理多个异步操作

Promise.all 可以同时处理多个异步操作，并在所有操作完成后统一处理结果。这样可以提高代码的效率和可读性。

const promise1 = new Promise(resolve => setTimeout(resolve, 1000, 'foo'));
const promise2 = new Promise(resolve => setTimeout(resolve, 2000, 'bar'));
const promise3 = new Promise(resolve => setTimeout(resolve, 3000, 'baz'));

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // ['foo', 'bar', 'baz']
});

上面的代码创建了三个 Promise 实例，并将它们放入一个数组中作为 Promise.all 的参数。当三个 Promise 实例都完成后，Promise.all 返回一个新的 Promise 实例，它的值为一个包含三个 Promise 实例的值的数组。

2. 处理异常情况

如果数组中有一个 Promise 实例失败了，Promise.all 就会立即返回一个失败的 Promise 实例。这时可以使用 catch 方法处理异常情况。

// www.javascriptcn.com code example
const promise1 = new Promise(resolve => setTimeout(resolve, 1000, 'foo'));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 2000, new Error('bar')));
const promise3 = new Promise(resolve => setTimeout(resolve, 3000, 'baz'));

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values);
}).catch(error => {
  console.error(error); // Error: bar
});

上面的代码中，promise2 是一个失败的 Promise 实例。当 Promise.all 接收到这个 Promise 实例时，它会立即返回一个失败的 Promise 实例，并将 promise2 的错误信息传递给 catch 方法。

3. 处理超时情况

如果 Promise.all 中的某个 Promise 实例一直没有返回结果，就会导致整个 Promise.all 卡住。为了避免这种情况，可以使用 Promise.race 方法来设置一个超时时间。

// www.javascriptcn.com code example
const promise1 = new Promise(resolve => setTimeout(resolve, 1000, 'foo'));
const promise2 = new Promise(resolve => setTimeout(resolve, 2000, 'bar'));
const promise3 = new Promise(resolve => setTimeout(resolve, 3000, 'baz'));

const timeout = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('timeout'));
  }, 1500);
});

Promise.race([Promise.all([promise1, promise2, promise3]), timeout]).then(values => {
  console.log(values); // ['foo', 'bar', 'baz']
}).catch(error => {
  console.error(error); // Error: timeout
});

上面的代码中，timeout 是一个在 1.5 秒后会失败的 Promise 实例。Promise.race 方法会同时执行 Promise.all 和 timeout，当其中一个 Promise 实例完成时，Promise.race 就会返回一个新的 Promise 实例。如果 timeout 先完成，就会返回一个失败的 Promise 实例，并将错误信息传递给 catch 方法。

示例代码

下面是一个使用 Promise.all 的示例代码。它从 GitHub API 中获取多个用户的信息，并在所有请求完成后统一处理结果。

// www.javascriptcn.com code example
interface User {
  login: string;
  name: string;
  bio: string;
}

async function getUsersInfo(users: string[]): Promise<User[]> {
  const promises = users.map(user => fetch(`https://api.github.com/users/${user}`).then(response => response.json()));
  const usersInfo = await Promise.all(promises);
  return usersInfo.map(userInfo => ({
    login: userInfo.login,
    name: userInfo.name,
    bio: userInfo.bio
  }));
}

getUsersInfo(['octocat', 'mojombo', 'defunkt']).then(usersInfo => {
  console.log(usersInfo);
}).catch(error => {
  console.error(error);
});

上面的代码中，getUsersInfo 函数接收一个包含多个用户登录名的数组作为参数。它使用 map 方法将每个用户登录名转换成一个 Promise 实例，并将这些 Promise 实例放入一个数组中。然后使用 Promise.all 方法等待所有 Promise 实例完成，并将结果转换成一个包含多个用户信息的数组。最后返回这个数组，或者在出现错误时抛出异常。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d279e1a941bf71344a824a

TypeScript 中使用 Promise.all 的使用技巧及示例代码