JS 实现并行请求的四种途径

2023-10-29 22:59:54

同时执行异步请求：在 JavaScript 中实现并行请求的四种方法

在实际的开发场景中，我们经常需要同时发出多个异步请求，例如同时请求用户信息和订单信息。为了让这些请求并行执行，我们可以借助以下四种方法：

1. async/await

async/await 是 ES8 中引入的语法，它允许我们以同步的方式编写异步代码。使用 async/await，我们可以同时发起多个请求，并在它们都返回时再进行处理。

const userPromise = fetch('/user');
const orderPromise = fetch('/order');

const [user, order] = await Promise.all([userPromise, orderPromise]);

console.log(user, order);

2. Promise.all

Promise.all 方法接受一个 Promise 数组，并返回一个新的 Promise。这个新的 Promise 在所有输入 Promise 都已解决（无论是否成功）后才解决。如果所有输入 Promise 都成功解决，则 Promise.all 返回一个包含所有结果值的数组。如果其中一个输入 Promise 被拒绝，则 Promise.all 将被拒绝，并传递拒绝原因。

const userPromise = fetch('/user');
const orderPromise = fetch('/order');

Promise.all([userPromise, orderPromise])
  .then(([user, order]) => {
    console.log(user, order);
  })
  .catch(error => {
    console.error(error);
  });

3. Promise.race

Promise.race 方法接受一个 Promise 数组，并返回一个新的 Promise。这个新的 Promise 在第一个输入 Promise 解决或拒绝时解决或拒绝。如果第一个解决的 Promise 是成功的，则 Promise.race 返回该 Promise 的结果值。如果第一个解决的 Promise 被拒绝，则 Promise.race 被拒绝，并传递拒绝原因。

const userPromise = fetch('/user');
const orderPromise = fetch('/order');

Promise.race([userPromise, orderPromise])
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error);
  });

4. 自定义状态

我们可以使用自定义状态来跟踪并行请求的状态。当所有请求都返回时，我们可以触发一个事件，并在事件处理程序中处理结果。

let userLoaded = false;
let orderLoaded = false;

const userPromise = fetch('/user');
const orderPromise = fetch('/order');

userPromise.then(() => {
  userLoaded = true;
  checkLoaded();
});

orderPromise.then(() => {
  orderLoaded = true;
  checkLoaded();
});

function checkLoaded() {
  if (userLoaded && orderLoaded) {
    console.log('Both requests have loaded.');
  }
}

总结

这四种方法都可以用于在 JavaScript 中实现并行请求。哪种方法最适合您的应用取决于您的具体需求。如果您需要顺序处理请求的结果，则 async/await 或 Promise.all 是一个不错的选择。如果您需要在第一个请求返回时立即处理结果，则 Promise.race 是一个不错的选择。如果您希望更灵活地控制请求的状态，则可以使用自定义状态。

常见问题解答