从代码示例看 ES8 中的 async/await：简化异步操作的利器

在 JavaScript 的异步编程世界里，从回调函数到 Promise，再到 ES8 引入的 async/await，每一次升级都让异步代码的编写和理解变得更加轻松。今天我们就通过一个具体的代码示例，来聊聊 async/await 如何简化异步操作。

传统 Promise 链式调用的局限

在处理异步操作时，Promise 的出现解决了回调地狱的问题，但当异步操作较多时，链式的.then()调用仍可能让代码显得冗长。比如代码中注释掉的这段使用fetch的代码：

ini 复制代码

fetch('https://api.github.com/users/shunwuyu/repos')
  .then(res => {
    return res.json()
  })
  .then(data => {
    console.log(data);
  })

这段代码通过两次.then()处理异步请求：第一次将响应转为 JSON，第二次打印数据。虽然比回调函数清晰，但多步操作时，链式结构仍不够直观。

async/await：让异步代码 "同步化"

ES8 引入的async/await语法，进一步优化了异步代码的编写方式。它允许我们用同步代码的结构来编写异步操作，极大提升了代码的可读性。

在示例代码中，我们可以看到这种写法的实践：

javascript 复制代码

// es8 async 修饰函数
const main = async() => {
    // await 等待右边的promise, 等待，异步变同步
    // resolved resolve(data) 交给左边的变量
    const res = await fetch('https://api.github.com/users/shunwuyu/repos')
    console.log(res);
    console.log(111);
}
main();

核心语法解析

async 关键字 ：用于修饰函数（如示例中的main函数），表明该函数内部包含异步操作。被async修饰的函数会自动返回一个 Promise 对象。
await 关键字 ：只能在async函数内部使用，用于等待一个 Promise 对象。它会暂停当前async函数的执行，直到等待的 Promise 状态变为resolved，然后将 Promise 的结果赋值给左边的变量（如示例中的res），再继续执行后续代码。

代码执行逻辑

在示例中，main函数被async修饰，内部通过await fetch(...)发起网络请求。由于fetch返回一个 Promise 对象，await会等待这个 Promise 完成：

当fetch请求成功并返回响应后，响应结果会被赋值给res；
之后按顺序执行console.log(res)和console.log(111)，这两行代码的执行顺序和同步代码完全一致，避免了链式调用的嵌套感。

总结

async/await 的出现，让 JavaScript 异步编程进入了一个更简洁的时代。它在 Promise 的基础上，通过 "同步化" 的代码结构，降低了异步逻辑的理解成本。对比传统的.then()链式调用，async/await 更贴近人类的思维习惯，尤其在处理多步依赖的异步操作时，优势更为明显。

从示例代码中可以清晰地看到，原本需要链式处理的异步请求，通过 async/await 变得像同步代码一样直观。这也是为什么 async/await 成为现代 JavaScript 异步编程的主流选择之一。