在前端开发中，异步调用是非常常见的操作。由于 JavaScript 是单线程执行的，如果使用同步调用会阻塞页面的渲染，导致用户体验不佳。因此，异步调用成为了解决这个问题的常用方法。
在 ES7 中，引入了 async 和 await 两个关键字，它们可以更为方便地实现异步调用，提高开发效率。本文将详细介绍 async 和 await 的用法，并提供示例代码，帮助读者更好地理解。
async 和 await 的基本用法
async 和 await 是 ES7 中新增的关键字。async 用于声明一个异步函数，而 await 则用于等待异步函数的执行结果。下面是一个简单的示例：
async function getData() {
const result = await fetch('https://api.example.com/data');
const data = await result.json();
return data;
}
getData().then(data => console.log(data));上面的例子中，我们声明了一个名为 getData 的异步函数，该函数使用了 fetch 方法获取数据，并使用 await 关键字等待获取数据的结果。最后，我们使用 then 方法打印出获取到的数据。
async 和 await 的优点
async 和 await 相较于传统的异步调用方式，有以下优点：
- 更为方便：使用 async 和 await 可以更为方便地实现异步调用。
- 更易读：使用 async 和 await 可以让代码更易读，避免了回调函数嵌套的问题。
- 更易调试：使用 async 和 await 可以更方便地调试代码，避免了回调函数的错误处理问题。
async 和 await 的注意事项
在使用 async 和 await 时，需要注意以下几点：
- async 函数返回的是一个 Promise 对象。
- await 只能在 async 函数内部使用。
- 如果使用 await 等待的 Promise 对象被 reject 了，会抛出一个错误，需要使用 try...catch 来处理该错误。
示例代码
下面是一个使用 async 和 await 实现异步调用的示例代码：
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- ------ - ----- --------------------------------------
----- ---- - ----- --------------
------ -----
- ----- ------- -
---------------------
-
-
------ ---------- -
----- ---- - ----- ----------
------------------
-----上面的代码中，我们声明了一个名为 getData 的异步函数，该函数使用了 try...catch 来处理错误。我们还使用了一个自执行的异步函数来调用 getData 函数，并使用 await 等待获取到数据后打印出来。
总结
本文介绍了 ES7 中的 async 和 await 关键字的用法，以及它们相较于传统的异步调用方式的优点。我们还提供了示例代码，帮助读者更好地理解这两个关键字的用法。在实际开发中，我们可以根据需要使用 async 和 await 来更为方便地实现异步调用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e756ea1886fbafa425b123