Promise 和 async/await 的性能比较-JavaScript中文网-JavaScript教程资源分享门户

Promise 和 async/await 是 JavaScript 中常用的异步处理方式。两者都可以有效解决回调地狱问题，提高代码可读性和可维护性。但是，在选择使用哪种方式时，我们也需要考虑它们的性能影响。

Promise 的性能

在使用 Promise 的过程中，需要使用 .then() 方法链式调用一系列操作。由于每一个 .then() 的返回值也是一个 Promise，因此会涉及到一定的性能消耗。在并发请求较多的场景下，Promise 也可能存在一些性能瓶颈。

async/await 的性能

相比较 Promise，async/await 更加简洁明了，不需要繁琐的 .then() 操作。使用 async/await 的时候，await 后面的异步操作会阻塞代码的执行，直到操作完成才会继续执行下面的代码。这样可以写出更加易读易维护的异步代码。

性能对比

虽然 async/await 的代码易读易维护，但是它在 CPU 密集型任务上的性能表现略逊于 Promise。这是因为在等待异步操作完成的过程中，async/await 会暂停代码执行，导致 CPU 空闲。而 Promise 可以在等待异步操作的同时继续执行下面的代码。

因此，在 CPU 密集型任务较多的场景下，我们可以选择使用 Promise。在 IO 密集型任务较多的场景下，使用 async/await 会更加适合。

示例代码

下面是一个使用 Promise 和 async/await 实现 HTTP 请求的示例代码，从中可以看出两者的不同之处。

使用 Promise：

function fetchArticle(id) {
  return fetch(`/api/articles/${id}`)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
}

使用 async/await：

// javascriptcn.com 代码示例
async function fetchArticle(id) {
  try {
    const response = await fetch(`/api/articles/${id}`);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

总结

在实际的开发过程中，我们需要根据不同的场景选择合适的异步处理方式。async/await 可以让我们写出易读易维护的代码，但在 CPU 密集型任务中的性能表现略逊于 Promise。因此，我们需要在性能和代码简洁度之间做出权衡，权衡出最优的异步处理方式。

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