使用 async/await 和 Promise.all 处理 ES7 中的并行异步请求-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步请求是非常常见的操作。但是，在处理多个异步请求时，我们常常需要等待前一个请求完成后才能进行下一个请求，这样会造成请求时间的浪费。为了解决这个问题，ES7 中引入了 async/await 和 Promise.all 两种特性。

async/await

async/await 是异步编程的新方式。它是基于 Promise 的，可以让我们以同步的方式编写异步代码，使代码更加简洁易懂。

async/await 的使用方法很简单，只需要在函数前面加上 async 关键字，然后在需要异步执行的代码前面加上 await 关键字即可。

下面是一个使用 async/await 处理异步请求的示例代码：

// javascriptcn.com 代码示例
async function getData() {
  const response1 = await fetch('https://api.example.com/data1');
  const data1 = await response1.json();
  
  const response2 = await fetch('https://api.example.com/data2');
  const data2 = await response2.json();
  
  return { data1, data2 };
}

getData().then(result => {
  console.log(result.data1);
  console.log(result.data2);
});

在上面的代码中，我们定义了一个名为 getData 的异步函数，它会依次请求两个接口，并将返回的数据保存在一个对象中。在调用 getData 函数时，我们使用了 then 方法来处理函数的返回值。

Promise.all

Promise.all 可以让我们同时发起多个异步请求，并在所有请求完成后收集它们的结果。它接收一个 Promise 数组作为参数，返回一个新的 Promise 对象。

下面是一个使用 Promise.all 处理异步请求的示例代码：

// javascriptcn.com 代码示例
function getData() {
  const promise1 = fetch('https://api.example.com/data1').then(response => response.json());
  const promise2 = fetch('https://api.example.com/data2').then(response => response.json());
  
  return Promise.all([promise1, promise2]);
}

getData().then(result => {
  console.log(result[0]);
  console.log(result[1]);
});

在上面的代码中，我们定义了一个名为 getData 的函数，它会同时请求两个接口，并将返回的数据保存在一个数组中。在调用 getData 函数时，我们使用了 then 方法来处理函数的返回值。

async/await 和 Promise.all 的结合使用

async/await 和 Promise.all 可以结合使用，以处理多个并行异步请求。下面是一个使用 async/await 和 Promise.all 处理异步请求的示例代码：

// javascriptcn.com 代码示例
async function getData() {
  const promise1 = fetch('https://api.example.com/data1').then(response => response.json());
  const promise2 = fetch('https://api.example.com/data2').then(response => response.json());
  
  const [data1, data2] = await Promise.all([promise1, promise2]);
  
  return { data1, data2 };
}

getData().then(result => {
  console.log(result.data1);
  console.log(result.data2);
});

在上面的代码中，我们定义了一个名为 getData 的异步函数，它会同时请求两个接口，并将返回的数据保存在一个对象中。在调用 getData 函数时，我们使用了 then 方法来处理函数的返回值。

总结

async/await 和 Promise.all 是处理异步请求的两种常用方式。async/await 让异步代码更加简洁易懂，而 Promise.all 则可以让我们同时发起多个异步请求，并在所有请求完成后收集它们的结果。在实际开发中，我们可以根据具体情况选择使用它们的组合方式，以实现更加高效、优雅的异步编程。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65741173d2f5e1655dd498ca