在前端开发中，异步编程是必不可少的技术，但是传统的异步编程方法（回调函数、Promise）存在一些问题，比如代码难以理解、嵌套层次深等。ES8 中引入了 async/await 函数，使得异步编程更加简单、易读、易维护。
async/await 函数简介
async/await 函数是 ES8 中引入的一种异步编程方法。它通过 async 关键字声明一个异步函数，该函数返回一个 Promise 对象。在函数内部，可以使用 await 关键字等待 Promise 对象的状态变为 resolved（已完成）或 rejected（已拒绝），从而避免了回调函数的嵌套。
async/await 函数的语法
async/await 函数的语法非常简单，如下所示：
async function functionName() {
// 异步操作
let result = await promiseObject;
// 后续操作
}其中，functionName 是函数名，async 关键字表示该函数是异步函数，而 await 关键字用于等待 Promise 对象的状态变化。当 promiseObject 的状态变为 resolved 时，await 的返回值就是 Promise 对象的 resolve 值；当 promiseObject 的状态变为 rejected 时，await 将会抛出 Promise 对象的 reject 值。
async/await 函数的应用场景
async/await 函数在实际开发中有很多应用场景，比如：
- 网络请求：在异步函数中使用 await 关键字等待网络请求的响应结果，避免回调函数的嵌套；
- 数据库操作：在异步函数中使用 await 关键字等待数据库操作的完成，避免回调函数的嵌套；
- 文件读写：在异步函数中使用 await 关键字等待文件读写操作的完成，避免回调函数的嵌套；
- 延时操作：在异步函数中使用 await 关键字等待一定时间后再执行后续操作，避免回调函数的嵌套。
async/await 函数的示例代码
下面是一个使用 async/await 函数实现异步操作的示例代码：
// javascriptcn.com 代码示例
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function fetchData() {
console.log('开始获取数据...');
await sleep(2000); // 模拟网络请求
console.log('数据获取完成！');
return { name: '张三', age: 18 };
}
async function main() {
try {
let data = await fetchData();
console.log(`姓名：${data.name}，年龄：${data.age}`);
} catch (error) {
console.error(error);
}
}
main();在上面的代码中，fetchData 函数模拟了一个网络请求，通过 await 关键字等待 2 秒后返回一个对象。而 main 函数则调用了 fetchData 函数，并通过 try...catch 语句捕获了可能出现的异常。当 fetchData 函数执行完成后，main 函数就会输出获取到的数据。
总结
async/await 函数是 ES8 中引入的一种异步编程方法，它通过 async 和 await 关键字简化了异步编程的代码，使得代码更加易读、易维护。在实际开发中，async/await 函数有着广泛的应用场景，可以用于网络请求、数据库操作、文件读写、延时操作等。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6557285bd2f5e1655d195f3d