async/await与Promise的区别？

基本概念

首先，我们需要明白async/await和Promise都是JavaScript中处理异步操作的API。

• Promise: 是一种代表了某个异步操作最终完成（或失败）及其结果值的对象。
• async/await: 是基于Promise的语法糖，它允许我们以更同步的方式编写异步代码。

使用Promise

在没有async/await之前，我们通常通过链式调用.then()和.catch()方法来处理Promise。例如，如果要按顺序执行两个异步操作，可能会这样写：

doSomethingAsync()
  .then(result => {
    console.log(result);
    return doSomethingElseAsync(result);
  })
  .then(newResult => {
    console.log(newResult);
  })
  .catch(error => {
    console.error('Something went wrong', error);
  });

这种方式可以有效地处理异步操作，但当涉及到多个异步操作时，代码可能会变得复杂和难以阅读，这通常被称为“回调地狱”。

使用async/await

async/await是在ES2017中引入的，使得异步代码的阅读和编写更像是传统的同步代码。async关键字用于声明一个异步函数，而await关键字则用于等待一个Promise的解决（fulfill）或拒绝（reject）。

同样的操作，使用async/await可以这样写：

async function asyncFunction() {
  try {
    const result = await doSomethingAsync();
    console.log(result);

    const newResult = await doSomethingElseAsync(result);
    console.log(newResult);
  } catch (error) {
    console.error('Something went wrong', error);
  }
}

在这个示例中，await使得JavaScript运行时等待Promise的解决，并且暂停函数的执行，直到Promise被解决。如果Promise被拒绝，错误将被catch块捕获。

总结区别

• 语法清晰: async/await提供了一种更清晰、更直观的方式来处理异步操作。代码看起来更像是同步的，因此更易于理解和维护。
• 错误处理: 使用async/await时，可以使用传统的try/catch语句进行错误处理，这对于很多开发者来说更加熟悉。
• 调试友好: async/await使得在异步代码中使用断点调试变得更加直观。
• 基于Promise: async/await是建立在Promise之上的，实质上它并没有替代Promise的功能，而是提供了一种更简洁的使用方式。

需要注意的是，async/await并不是在所有情况下都替代Promise链。例如，在处理多个并行异步操作时，Promise.all()仍然是一个非常有用的选择。关于这一点将在我的下一篇文章中说明