在过去的前端开发中，由于 JavaScript 的异步编程模式使用 callback 地域，造成了一些问题，如代码可读性差、复杂度高等。为了解决这些问题，ES8 引入了 async / await 语法，为前端开发带来了一大利好。
什么是异步 /await 语法
异步 /await 是一种用于处理异步操作的语法糖，它基于 Promise，并且让异步代码看起来更像同步代码。使用 async / await，我们可以将异步操作的代码写成同步的形式，让代码更加简洁易读。
如何使用异步 /await 语法
使用异步 /await 语法非常简单，只需要在异步函数前面加上 async 关键字，然后在需要等待异步操作结果的地方使用 await 关键字即可。
下面是一个简单的示例代码，使用异步 /await 语法获取 GitHub 上某个用户的信息：
async function getUserInfo(username) {
const response = await fetch(`https://api.github.com/users/${username}`);
const data = await response.json();
return data;
}
getUserInfo('octocat').then(data => console.log(data));在上面的代码中，我们使用 async 关键字定义了一个异步函数 getUserInfo，在函数体内使用 await 关键字等待异步操作结果。我们首先使用 fetch 方法获取 GitHub 上某个用户的信息，然后使用 await 关键字等待响应结果返回。接着，使用 await 关键字等待将响应结果转换为 JSON 数据。最后，我们将返回的数据打印到控制台上。
异步 /await 语法的优势
使用异步 /await 语法，我们可以避免 callback 地域的问题，让代码更加易读易懂。与此同时，异步 /await 语法还有以下几个优势：
1. 错误处理更加方便
使用异步 /await 语法，我们可以使用 try / catch 来捕获异步操作中的错误。这种方式比使用 callback 函数传递错误更加方便，让代码更加清晰易读。
-- -------------------- ---- -------
----- -------- --------------------- -
--- -
----- -------- - ----- --------------------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
-
-
------------------------------------- -- -------------------在上面的代码中，我们使用 try / catch 来捕获异步操作中的错误。如果在获取 GitHub 用户信息时出现错误，我们将错误打印到控制台上。
2. 链式调用更加方便
使用异步 /await 语法，我们可以使用链式调用来处理多个异步操作。这种方式比使用 callback 函数嵌套更加方便，让代码更加简洁易读。
-- -------------------- ---- ------- ----- -------- ------------------------------ - ----- -------- - ----- -------------------------------------------------- ----- -------- - ----- ---------------- ----- ------------- - ----- -------------------------- ----- ----- - ----- --------------------- ------ - ------------ ----- -- - ----------------------------------------- -- -------------------
在上面的代码中，我们使用异步 /await 语法处理了两个异步操作：获取 GitHub 用户信息和获取用户的仓库列表。我们通过链式调用将这两个操作链接在一起，让代码更加简洁易懂。
3. 更好的兼容性
异步 /await 语法是 ES8 中的语法，但是它可以通过 Babel 等工具转换为 ES6 或者 ES5 的语法，从而兼容更多的浏览器版本。
总结
异步 /await 语法是一种用于处理异步操作的语法糖，它可以让异步代码看起来更像同步代码。使用异步 /await 语法，我们可以避免 callback 地域的问题，让代码更加易读易懂。异步 /await 语法还有许多优势，如错误处理更加方便、链式调用更加方便、兼容性更好等。在实际开发中，我们应该尽可能地使用异步 /await 语法，让我们的代码更加简洁易懂。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6580fb14d2f5e1655dc2e77e