前端JavaScript篇之对async/await 的理解、async/await的优势、async/await对比Promise的优势

---

对async/await 的理解

async/await 是 ES2017 中引入的新特性，它是一种基于 Promise 的异步编程模式，可以让我们更方便地处理异步操作，避免回调地狱，使代码更加简洁易读。。async/await 是基于 Promise 的异步编程语法糖，它是为了解决 Promise 嵌套和回调地狱问题而设计的，可以让异步代码看起来像同步代码一样，易于理解和维护。下面我来详细解释一下 async/await 的实现机制和使用方式。

async/await 是基于 Promise 的异步编程语法糖，它的本质是将异步操作转换成同步操作，使代码看起来像同步代码一样，易于理解和维护。async/await 的关键字分别是 async 和 await，它们的作用分别是：

• async：修饰一个函数，表示该函数是一个异步函数，它内部的异步操作会返回一个 Promise 对象。
• await：等待一个 Promise 对象的状态变为 resolved 或 rejected，并将其结果返回。await 关键字只能在异步函数内部使用，它会暂停异步函数的执行，等待 Promise 对象的状态变化，然后根据 Promise 对象的状态执行相应的操作。

async function getUserInfo(userId) {
  try {
    const userInfo = await getUserInfoFromApi(userId)
    const userOrders = await getUserOrdersFromApi(userId)
    const result = {
      userInfo,
      userOrders
    }
    return result
  } catch (error) {
    console.error(error)
  }
}

在上面的代码中，我们定义了一个异步函数 getUserInfo()，它接受一个用户 ID 作为参数，并返回一个包含用户信息和订单信息的对象。在函数内部，我们使用 await 关键字等待两个异步操作 getUserInfoFromApi() 和 getUserOrdersFromApi() 的结果，并将它们合并为一个对象。如果任何一个异步操作出现错误，则会通过 catch() 方法捕获并输出错误信息。

需要注意的是，使用 async/await 时需要避免出现死循环和阻塞主线程的问题，以免影响程序的性能和稳定性。同时，由于 async/await 是基于 Promise 的异步编程语法糖，所以它并不是 Promise 的替代品，有些场景下仍然需要使用 Promise 或其他异步编程方式来处理异步操作。

async/await的优势

async/await 相比于传统的 Promise 链式调用方式，有以下几个优势：

1. 代码结构更加清晰易懂

使用 async/await 可以让异步代码看起来像同步代码一样，更加易于理解和维护。传统的 Promise 链式调用方式会使代码结构变得非常复杂，而 async/await 可以让代码结构更加清晰易懂。

2. 错误处理更加方便

使用 async/await 可以使用 try-catch 语句来捕获 Promise 对象的 rejected 状态，从而更加方便地处理错误。传统的 Promise 链式调用方式需要在每个 .then() 方法中添加错误处理回调函数，代码冗余度较高。

3. 可以使用同步的方式编写异步代码

使用 async/await 可以让异步代码看起来像同步代码一样，可以使用同步的方式编写异步代码。这样可以使代码更加自然、直观，并且容易调试。

4. 可以使用 return 语句直接返回结果

使用 async/await 可以使用 return 语句直接返回异步操作的结果，而不需要使用 Promise 对象的 resolve 方法。这样可以使代码更加简洁。

总之，async/await 可以让异步代码更加易于理解和维护，同时也可以使代码更加简洁、自然、直观。因此，它已经成为现代 JavaScript 中处理异步操作的主流方式之一。

一个在工作中常用的案例是从服务器端获取数据，然后将数据展示在前端页面上。下面是一个使用 Promise 和 async/await 分别实现的案例：

// 使用 Promise 实现从服务器端获取数据
function getData() {
  return new Promise((resolve, reject) => {
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then(response => response.json())
      .then(data => {
        resolve(data)
      })
      .catch(error => {
        reject(error)
      })
  })
}

getData()
  .then(data => {
    console.log(data)
  })
  .catch(error => {
    console.error(error)
  })

上述代码中，使用了 Promise 和 fetch 函数从服务器端获取数据，然后将数据打印到控制台上。

下面是同样的案例，使用 async/await 实现：

// 使用 async/await 实现从服务器端获取数据
async function getData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos')
    const data = await response.json()
    console.log(data)
  } catch (error) {
    console.error(error)
  }
}

getData()

上述代码中，使用了 async/await 和 fetch 函数从服务器端获取数据，然后将数据打印到控制台上。在代码中使用了 try…catch 块来处理可能出现的异常，代码更加简洁、直观。

async/await对比Promise的优势

1. 更加简洁、直观：使用 async/await 可以避免 Promise 链式调用时的嵌套和回调地狱的问题，使代码更加易于阅读和维护。async/await 代码更加简洁、直观，让异步代码的写法更加接近同步代码。

2. 更加容易处理异常：使用 async/await 可以像同步代码一样使用 try…catch 块来处理可能出现的异常，避免了 Promise 链式调用时需要在每个 then 方法中处理异常的问题。这使得代码的错误处理更加友好和直观。

3. 更加灵活：async/await 可以像同步代码一样使用 if、for、while 等语句，使得异步代码的逻辑更加灵活。这使得异步代码的编写更加简单、直观和高效。

4. 更加高效：async/await 可以使用 await 关键字将异步操作转换为同步操作，避免了 Promise 链式调用时多次回调的问题，使得异步代码的执行速度更加高效。

5. 代码可读性更好：async/await 让异步代码的写法更加接近同步代码，使代码更容易理解和阅读。相比之下，Promise 的链式调用虽然摆脱了回调地狱，但是代码可读性仍然不如 async/await。

6. 中间值传递更方便：在 Promise 中传递中间值需要通过 then 方法的参数来实现，代码比较冗长，而在 async/await 中，可以像同步代码一样使用变量传递中间值，代码更加简洁。

7. 错误处理更友好：使用 async/await 可以像同步代码一样使用 try…catch 块来处理异常，使得代码的错误处理更加友好和直观。而在 Promise 中，需要在每个 then 方法中处理异常，代码比较冗长。

8. 调试更方便：在 async/await 中，可以像同步代码一样使用调试器设置断点，方便调试代码。而在 Promise 中，由于没有代码块，调试起来比较困难。

综上所述，async/await 相比 Promise 有更好的代码可读性、中间值传递更方便、错误处理更友好、调试更方便等优势，使得异步代码的编写更加简单、直观和高效。但是需要注意的是，async/await 也有一些限制，比如不能在顶层作用域中使用，需要在 async 函数内部使用。

持续学习总结记录中，回顾一下上面的内容：
async/await是JavaScript中处理异步操作的一种语法糖。它让我们可以用同步的方式写异步代码，使得代码更易读懂。

async/await的优势：

1. 代码更简洁：不需要嵌套的回调函数或链式调用的Promise，代码结构更清晰。
2. 异常处理更方便：使用try-catch语法捕获和处理异常，使错误处理更容易。
3. 控制流更直观：可以使用常规的控制流语句（如for循环、if语句）组织异步代码，逻辑更清晰易懂。
   

相比于Promise，async/await的优势：

1. 更接近同步编程：更容易理解和学习，无需过多关注Promise的.then()和.catch()。
2. 错误处理更简单：使用try-catch来捕获异常，而不是通过传递错误回调函数。
3. 代码可读性更高：使用常规的控制流语句，代码更易读、维护和调试。
   需要注意的是，async/await本质上仍依赖于Promise，只是提供了更友好的语法糖来处理异步操作。