在 ES8 中使用 async/await 改进 Promise 链式调用

拥有可读性和可维护性好的代码是每个开发者的追求。Promise 是 es6 中一种非常好的处理异步代码的方式，但是 Promise 的链式调用语法难以理解和维护。ES8 中新增的特性 async/await, 可以极大地加强 Promise 的可读性和可维护性。

什么是 async/await

async/await 是 ES8 中新增的特性，旨在提供更简洁、更易读的异步编程方式。async/await 基于 Promise，是 Promise 的一种语法糖。

• async: 让一个函数变成异步函数，虽然 async 函数返回的是 Promise 对象，但是内部的执行不再是 Promise 链式调用的形式，在 async 函数内部直接使用 await 来处理异步代码。
• await: 在 async 函数内部使用，等待 Promise 对象的执行结果，并返回 Promise 结果值或 Promise Error。

为什么要使用 async/await

使用 async/await 的好处主要在于代码可读性和可维护性上，其优点如下：

• 更好的可读性：使用 await 可以在代码中表现出明确的执行顺序和逻辑；
• 更好的可维护性：不需要写链式调用，不需要写大量的 then，代码逻辑更加清晰，更容易维护；
• 更好的错误捕获：使用 try-catch 结构可以更好地处理异步代码的错误；

如何在 ES8 中使用 async/await

使用 async/await 特性，异步代码实现起来非常简单，下面是一个例子：

function getUserInfo(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const userInfo = {
        id: userId,
        name: 'Alice',
        age: 18
      }
      resolve(userInfo)
    }, 1000)
  })
}

async function getUserInfoAsync(userId) {
  try {
    const userInfo = await getUserInfo(userId);
    console.log(userInfo);
  } catch(err) {
     console.log(err);
  }
}

通过上面的例子可以看到，我们使用 async 定义了一个异步函数 getUserInfoAsync，通过 await 来等待 getUserInfo 的执行结果，把异步代码展现出同步代码的形式给程序员，实现了异步代码的可读性和可维护性增强；同时使用 try-catch 结构捕获异步代码的错误，优化了错误处理的方式。

async/await 中的错误处理

在 async/await 中，一般的错误处理方式是使用 try-catch 结构，在 try 语句块中使用 await 关键字来获取异步代码的执行结果。

async function getUserInfoAsync(userId) {
  try {
    const userInfo = await getUserInfo(userId);
    console.log(userInfo);
  } catch(err) {
     console.log(err);
  }
}

总结

async/await 的使用可以大大增强 Promise 代码的可读性和可维护性，同时也更好地处理异步异常，使用 async/await 使代码逻辑更加清晰，更易于维护。在编写 Promise 代码时，使用 async/await 是一个很好的选择。

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