在前端开发中，异步编程是一个非常重要的概念。在 JavaScript 中，我们通常使用回调函数、Promise 等方式来处理异步操作。而在 ES7 中，新增了 async 和 await 关键字，使得异步编程更加简单和优雅。本文将介绍 ES7 中的异步和 await，帮助大家更好地理解和使用这两个关键字。
什么是异步编程
在 JavaScript 中，异步编程是指在执行某个操作时，不会阻塞程序的执行，而是通过回调函数、Promise 等方式来处理。这样可以使得程序更加高效和流畅，避免出现长时间的等待和卡顿。
例如，当我们需要从服务器获取数据时，如果采用同步的方式，那么程序会一直等待服务器返回数据，直到数据返回后才会继续执行下面的代码。而采用异步的方式，我们可以同时执行其他的操作，等数据返回后再执行相应的回调函数。
async 和 await
在 ES7 中，新增了 async 和 await 关键字，用于处理异步操作。async 用于定义一个异步函数，而 await 用于等待异步操作完成并返回结果。
async
async 关键字用于定义一个异步函数，其语法如下：
async function functionName() {
// 异步操作
}异步函数会返回一个 Promise 对象，可以使用 then 方法来处理返回的结果。例如：
async function getData() {
return 'Hello World';
}
getData().then(result => {
console.log(result); // 输出：Hello World
});await
await 关键字用于等待异步操作完成并返回结果，其语法如下：
let result = await promise;
其中 promise 表示一个 Promise 对象，await 会暂停异步函数的执行，直到 promise 执行完成并返回结果。例如：
// javascriptcn.com 代码示例
async function getData() {
let result = await fetch('https://api.github.com/users');
let data = await result.json();
return data;
}
getData().then(result => {
console.log(result); // 输出：GitHub 用户列表数据
});在上面的代码中，我们使用 await 等待 fetch 方法获取数据，并使用 await 等待 result.json() 方法解析数据。这样可以保证在获取数据和解析数据完成之后再返回结果，避免了回调函数的嵌套和代码的复杂性。
示例代码
下面是一个使用 async 和 await 处理异步操作的示例代码：
// javascriptcn.com 代码示例
async function getData() {
let result = await fetch('https://api.github.com/users');
let data = await result.json();
return data;
}
async function showData() {
let data = await getData();
data.forEach(user => {
console.log(user.login);
});
}
showData();在上面的代码中，我们定义了一个 getData 函数和一个 showData 函数。getData 函数用于获取 GitHub 用户列表数据，showData 函数用于展示数据。在 showData 函数中，我们使用 await 等待 getData 函数返回数据，并使用 forEach 方法遍历数据并输出每个用户的登录名。
总结
异步编程是前端开发中非常重要的概念，ES7 中的 async 和 await 关键字使得异步编程更加简单和优雅。在使用 async 和 await 进行异步编程时，需要注意避免出现阻塞和死循环等问题，保证程序的高效和流畅。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657433dad2f5e1655dd787a0