53 | 网络接口简介（四）：Promise三个方法any、all与race的使用介绍-微信小程序全栈开发实战(上)

当前位置:　首页>> 技术小册>> 微信小程序全栈开发实战(上)

53 | 网络接口简介（四）：Promise三个方法`any`、`all`与`race`的使用介绍

在微信小程序的全栈开发过程中，网络请求是不可或缺的一环，它连接着前端与后端的数据交互，是实现动态内容展示和交互功能的关键。而在处理异步网络请求时，JavaScript 的 Promise 对象为我们提供了一种优雅的方式来处理这些异步操作。本章节将深入介绍 Promise 对象的三个高级方法：Promise.any()、Promise.all() 和 Promise.race()，它们各自在特定的场景下能够极大地提升代码的可读性和效率。

一、`Promise.all()`：并行执行，全部成功

Promise.all() 方法接收一个 promise 数组作为参数，并返回一个新的 promise 实例。只有当这个数组里的所有 promise 都成功完成时，返回的 promise 才会解决（resolve），并且它的解决值（resolve value）是一个数组，包含了所有 promise 的解决值，顺序与输入数组中的 promise 顺序一致。如果有任何一个 promise 失败（reject），则返回的 promise 会立即失败，且失败原因是第一个失败的 promise 的失败原因。

应用场景：

当你需要从多个不同的 API 获取数据，并且这些数据之间没有依赖关系，但你需要等待所有数据都加载完成后才能继续执行下一步操作时，Promise.all() 显得尤为适用。

示例代码：

function fetchUserData(userId) {
  return new Promise((resolve, reject) => {
    // 模拟异步请求
    setTimeout(() => {
      if (userId > 0) {
        resolve(`User ${userId} data`);
      } else {
        reject('Invalid user ID');
      }
    }, 1000);
  });
}
Promise.all([
  fetchUserData(1),
  fetchUserData(2),
  fetchUserData(3)
]).then(results => {
  console.log(results); // ["User 1 data", "User 2 data", "User 3 data"]
}).catch(error => {
  console.error(error); // 如果有任何一个请求失败，将捕获错误
});

二、`Promise.race()`：竞争执行，第一个完成

Promise.race() 方法同样接收一个 promise 数组作为参数，但它与 Promise.all() 的行为截然不同。Promise.race() 返回一个新的 promise，这个 promise 会在数组中的任意一个 promise 解决（resolve）或拒绝（reject）时立即以相同的值被解决或拒绝。换句话说，它实现了“竞争”机制，哪个 promise 先完成（无论成功或失败），返回的 promise 就以该 promise 的结果作为自己的结果。

应用场景：

当有多个请求发送，但你只需要第一个返回的结果时，使用 Promise.race() 可以有效减少等待时间。
超时处理，可以创建一个在指定时间后解决的 promise，与其他请求一起传递给 Promise.race()，以实现超时机制。

示例代码：

function fetchWithTimeout(userId, timeout) {
  return Promise.race([
    fetchUserData(userId), // 假设这是实际的请求函数
    new Promise((resolve, reject) => {
      setTimeout(() => reject('Request timed out'), timeout);
    })
  ]);
}
fetchWithTimeout(1, 500).then(data => {
  console.log(data); // 如果500ms内请求完成，则显示数据
}).catch(error => {
  console.error(error); // 如果500ms内请求未完成，则显示超时信息
});

三、`Promise.any()`：并行执行，至少一个成功

Promise.any() 是 ES2020 引入的一个新方法，与 Promise.all() 类似，它也接收一个 promise 数组作为参数，并返回一个新的 promise。但不同的是，Promise.any() 等待的是数组中的任意一个 promise 成功解决（resolve），而不是全部。如果所有传入的 promise 都失败了，则返回一个新的 promise，该 promise 会被拒绝（reject），且拒绝原因是一个包含所有失败原因的 AggregateError（一个特殊的 Error 对象，用于表示多个错误）。

应用场景：

在多个备选服务源中请求数据，只要其中一个成功即可。
尝试多种方法解决问题，只要有一种方法成功就停止其他尝试。

示例代码（注意：由于 Promise.any() 是较新的特性，确保你的运行环境支持 ES2020 或使用适当的 polyfill）：

Promise.any([
  fetchUserData(100).catch(() => null), // 假设这个用户ID无效，通过catch避免直接reject
  fetchUserData(2),
  fetchUserData(3)
]).then(result => {
  console.log(result); // 输出第一个成功的结果
}).catch(error => {
  if (error instanceof AggregateError) {
    console.error('All requests failed:', error.errors); // 处理所有请求失败的情况
  } else {
    console.error('Unexpected error:', error);
  }
});

在上述代码中，我们通过 .catch(() => null) 来处理可能失败的请求，防止它们影响 Promise.any() 的结果。这是因为 Promise.any() 会忽略那些被解决为 null 或 undefined 的 promise，只有当所有 promise 都以失败告终时，它才会被拒绝。

总结

Promise.all()、Promise.race() 和 Promise.any() 是处理并行异步操作时的强大工具，它们各自在不同的场景下发挥着重要作用。了解并熟练掌握这些方法的使用，对于提升微信小程序全栈开发的效率和代码质量至关重要。通过合理组合使用这些方法，你可以更灵活地处理复杂的异步逻辑，编写出既高效又易于维护的代码。