ES7 async/await 中的多个 Promise 请求及解决方式-JavaScript中文网-JavaScript教程资源分享门户

ES7 async/await 中的多个 Promise 请求及解决方式

在现代前端开发中，异步编程的需求越来越高。ES6 中的 Promise 使得我们能够更加方便地进行异步编程，而 ES7 中的 async/await 则更进一步地简化了异步编程，并大大提高了代码的可读性。然而，在实际开发中，我们常常需要进行多个 Promise 请求，这就需要我们对多个 Promise 进行处理，确保它们的执行顺序和结果正确。本文将详细介绍在 ES7 async/await 中如何处理多个 Promise 请求。

多个 Promise 请求的问题

在异步编程中，我们经常需要进行多个异步请求，比如在前端开发中：同时获取用户信息和商品信息、上传多张图片等。在 ES6 中，我们可以使用 Promise.all() 方法来执行多个异步请求，确保它们的执行顺序和结果正确。比如：

Promise.all([getUserInfo(), getProductInfo()])
  .then(([user, product]) => {
    // 处理 user 和 product
  })
  .catch(error => {
    // 错误处理
  });

使用 async/await，我们可以更加简单地处理单个 Promise 请求。但是，在处理多个 Promise 请求时，我们需要控制它们的执行顺序和结果，这就需要对多个 Promise 进行处理。比如下面的代码：

// javascriptcn.com 代码示例
async function uploadImages(images) {
  for (let i = 0; i < images.length; i++) {
    const image = images[i];
    const url = await uploadImage(image); // 上传单张图片
    
    console.log(`第 ${i + 1} 张图片上传成功，url：${url}`);
  }
  
  console.log('所有图片上传完成！');
}

在 uploadImages 函数中，我们通过 for 循环遍历图片数组，逐个上传图片。这种方式的问题在于，它们是依次执行的，即当前一个图片上传成功后才会执行下一个图片的上传。这样，上传多张图片的时间会很长。而如果使用 Promise.all() 可以同时上传多张图片，速度会更快。

在 ES7 中，我们可以使用 async/await 来实现类似于 Promise.all() 的功能，例如：

// javascriptcn.com 代码示例
async function uploadImages(images) {
  const uploadList = [];
  
  for (let i = 0; i < images.length; i++) {
    const image = images[i];
    const uploadPromise = uploadImage(image); // 上传单张图片
    uploadList.push(uploadPromise);
  }
  
  const urls = await Promise.all(uploadList);
  
  console.log(`所有图片上传成功，urls：${urls}`);
}

这段代码中，我们通过 for 循环遍历图片数组，逐个生成 Promise，并将它们存储在 uploadList 数组中。接着，我们使用 Promise.all() 将所有 Promise 集合在一起，等待所有 Promise 完成后返回结果。最后，我们通过 await 取得 Promise.all() 的结果，完成所有图片的上传，并打印出所有图片的 URL。

多个 Promise 请求的解决方式

在实际开发中，多个 Promise 请求会有诸多问题，比如控制它们的执行顺序、处理它们的错误等。下面我们将结合代码示例，详细讲解多个 Promise 请求的解决方式。

控制 Promise 请求的执行顺序

在执行多个 Promise 请求时，我们有时需要控制它们的执行顺序，比如先发送请求 A，等请求 A 完成后再发送请求 B。此时，我们可以使用 async/await 来实现控制 Promise 请求的执行顺序。例如下面的代码：

async function loadData() {
  const resultA = await fetch('/api/dataA');
  // 处理 resultA 数据
  
  const resultB = await fetch('/api/dataB');
  // 处理 resultB 数据
}

在上述代码中，我们先发送请求 A，并通过 await 等待请求 A 的完成。如果请求 A 能够成功完成，那么就可以处理 resultA 数据。接着，我们再发送请求 B，并等待请求 B 的完成，然后处理 resultB 数据，以此类推。

需要注意的是，这里的请求 A 和请求 B 是串行执行的，即请求 B 只有在请求 A 完成后才会执行。如果我们需要同时执行多个 Promise 请求，可以使用 Promise.all()，例如：

async function loadData() {
  const [resultA, resultB] = await Promise.all([
    fetch('/api/dataA'),
    fetch('/api/dataB')
  ]);
  
  // 处理 resultA 和 resultB 数据
}

在上述代码中，我们使用 Promise.all() 将请求 A 和请求 B 集合在一起，并等待它们的完成。如果所有的请求都能够成功完成，那么就可以同时处理 resultA 和 resultB 数据。

处理多个 Promise 的错误

在处理多个 Promise 请求时，我们还需要考虑错误的处理。在 ES7 async/await 中，如果有任何一个 Promise 被 reject，那么整个 async 函数将直接抛出错误。因此，我们建议不要对单个 Promise 使用 catch() 方法处理错误，而应该在 async 函数外部统一处理错误。例如：

// javascriptcn.com 代码示例
async function loadData() {
  try {
    const [resultA, resultB] = await Promise.all([
      fetch('/api/dataA'),
      fetch('/api/dataB')
    ]);

    // 处理 resultA 和 resultB 数据
  } catch (error) {
    console.error(error);
  }
}

在上述代码中，我们使用 try...catch 来处理 Promise.all() 返回的错误对象。如果其中有任何一个请求失败，都会被 catch 捕捉到，并打印出错误信息，以便我们及时修复问题。

管理多个 Promise 的并发数

在实际开发中，多个 Promise 请求可能会对服务器造成压力，导致服务器出现性能问题。因此，我们需要对多个 Promise 的同时请求进行限制，以避免过多的请求对服务器造成过大的压力。这个问题可以使用第三方库如 axe-requests 或者 Bluebird 来解决。

axe-requests 是一个请求排队控制库，它会将请求添加到队列中，每次只有一个请求在被执行，可以控制请求的频率，以避免对服务器造成强压力。例如：

// javascriptcn.com 代码示例
import queue from 'axe-requests';

async function loadData() {
  const urls = ['/api/dataA', '/api/dataB', '/api/dataC'];
  
  const results = await Promise.all(urls.map(url => {
    return queue.add(() => fetch(url));
  }));
  
  // 处理 results 数据
}

在上述代码中，我们使用 axe-requests 将请求添加到队列中，保证每次只执行一个请求。这样，可以避免过多的请求对服务器造成过大的压力。

对于正常的业务场景，我们不需要限制请求并发数的情况下，我们也可以考虑使用 Bluebird 库来处理多个 Promise 的情况。Bluebird 库提供了类似于 Promise.all() 方法的 Promise.map() 方法，可以用来管理多个 Promise 请求的结果。例如：

// javascriptcn.com 代码示例
import Promise from 'bluebird';

async function loadData() {
  const urls = ['/api/dataA', '/api/dataB', '/api/dataC'];
  
  const results = await Promise.map(urls, url => {
    return fetch(url);
  }, { concurrency: 10 });

  // 处理 results 数据
}

在上述代码中，我们使用 Promise.map() 方法来管理多个 Promise 请求的结果，并通过 concurrency 属性控制 Promise 的并发数，以避免对服务器造成压力。

总结

在 ES7 async/await 中，多个 Promise 请求可以使用 Promise.all() 来保证它们的执行顺序和结果正确，也可以使用第三方库如 axe-requests 或者 Bluebird 来管理多个 Promise 的并发和错误处理。掌握以上技巧，可以帮助我们更加高效地进行前端开发。

样例代码：

// javascriptcn.com 代码示例
// Promise.all() 处理多个 Promise 请求

async function loadData() {
  const [resultA, resultB] = await Promise.all([
    fetch('/api/dataA'),
    fetch('/api/dataB')
  ]);

  // 处理 resultA 和 resultB 数据
}


// 错误处理

async function loadData() {
  try {
    const [resultA, resultB] = await Promise.all([
      fetch('/api/dataA'),
      fetch('/api/dataB')
    ]);

    // 处理 resultA 和 resultB 数据
  } catch (error) {
    console.error(error);
  }
}


// 处理多个 Promise 请求的并发数

import queue from 'axe-requests';

async function loadData() {
  const urls = ['/api/dataA', '/api/dataB', '/api/dataC'];

  const results = await Promise.all(urls.map(url => {
    return queue.add(() => fetch(url));
  }));

  // 处理 results 数据
}


// 使用 Bluebird 管理多个 Promise 的并发和错误处理

import Promise from 'bluebird';

async function loadData() {
  const urls = ['/api/dataA', '/api/dataB', '/api/dataC'];

  const results = await Promise.map(urls, url => {
    return fetch(url);
  }, { concurrency: 10 });

  // 处理 results 数据
}

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