在 JavaScript 编程中，异步编程是非常常见的。异步编程方式通过避免长时间的操作卡死浏览器，使得程序能够在执行异步操作时完成其他的任务。然而，异步编程也会让我们的代码变得更复杂，开发人员需要注意异步代码如何处理。
在 ES7 中，为了使异步编程变得更加简洁和易于理解，Javascript 添加了 async/await 模式。这篇文章将详细介绍 async/await 模式，包括其用法、实现和示例。
async & await 的理解
首先，我们要理解 async/await 的意义。async函数是指一个异步函数，它将返回一个 Promise 对象。我们可以使用 await 将结果直接提取，并且不需要在代码中使用回调函数。
async/await 仅是 Promise 的语法糖，并不是 Promise 完成机制的实现。它只是一个用于编写 Promise 的新语法，而 Promise 主要用于解决异步执行的问题。
如何使用 async & await
使用 async/await 模式，我们需要创建一个异步函数使用 async 关键字。在函数体内，我们使用 await 关键字来等待 Promise 对象返回。如果 Promise 对象成功，则 await 将返回 Promise 对象的成功值。否则，它将抛出一个异常。
以下的代码片段展示了一个使用 async/await 的函数：
async function fetchData() {
const response = await fetch('http://api.com/data');
const data = await response.json();
return data;
}
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));在上述代码中，我们定义了一个名为 fetchData 的异步函数，使用 async 关键字将其声明为一个异步函数。在函数中，我们使用 await 关键字等待 fetch API 返回的 Promise 对象执行，然后解析返回式的 json 对象。最后，我们将解析后的数据返回。
异步编程实现示例
下面，我们来看一下一个常见的异步编程的示例——从数据库中获取数据的代码。我们将看到如何使用 async/await 来简化它。
以下是我们要获取数据的示例代码：
function getRecordById(id, callback){
setTimeout(() => {
callback(null, {
id: id,
name: 'Anthony'
})
}, 1000)
}
function getUserById(id, callback){
setTimeout(() => {
getRecordById(id, (err, record) => {
if(err){
callback(err);
return;
}
callback(null, record);
});
}, 1000)
}
getUserById(123, (err, user) => {
if(err){
console.error(err);
return;
}
console.log(user.id, user.name);
})在这个示例代码中，我们首先定义了名为 getRecordById 的函数。这个函数将在 1 秒后调用回调函数返回错误消息或用户对象。然后，我们定义了名为 getUserById 的函数。它调用 getRecordById 函数，等待 1 秒后返回用户信息。
使用 async/await 模式，我们可以将异步执行的代码改写为以下形式：
function getRecordById(id){
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
id: id,
name: 'Anthony'
});
}, 1000)
})
}
async function getUserById(id){
const record = await getRecordById(id);
return record;
}
getUserById(123)
.then(user => console.log(user.id, user.name))
.catch(error => console.error(error));在上一个代码片段中，我们首先定义了一个名为 getRecordById 的异步函数，它返回一个在 1 秒后承诺解析的对象。然后，我们定义了一个名为 getUserById 的异步函数，它调用 getRecordById 函数，等待任务完成后返回用户对象。
总结
async/await 模式使异步编程代码变得更加清晰和定义。通过使用 async 和 await 关键字，我们可以写出具有同步而不是异步的代码。这大大提高了代码的可读性，并使异步编程变得简单。除此之外，async/await 还提供了使用 Promise 更完整的解决响应式方案的能力。
在日常开发中，我们需要经常考虑使用 async/await 来简化我们的异步编程代码。它将帮助我们避免一些令人讨厌的回调函数嵌套和让我们的代码变得更容易维护。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b75b56add4f0e0fffeafd8