在前端开发中，经常会遇到异步操作的情况，比如发起 Ajax 请求、读写本地存储、执行动画等等。传统的处理方式是使用回调函数或 Promise，但这种方式容易出现回调嵌套过多、代码难以理解、错误处理困难等问题。ES2017 引入的 async/await 语法可以帮助我们更加优雅地解决这些问题。本文将介绍如何使用 async/await 实现异步操作。
Async/await 是什么
async/await 是 ES2017 的新特性，用于简化异步操作。async/await 结合了 Promise 和 generator 的优点，可以让我们使用同步的方式编写异步代码。async 表示该函数是异步函数，await 表示等待异步操作完成。下面是一个简单的例子：
async function fetchData() {
const response = await fetch('/data.json');
const data = await response.json();
return data;
}
fetchData().then(data => console.log(data));在上面的例子中，我们定义了一个异步函数 fetchData，使用 async 标记该函数是异步函数。在 fetchData 中我们使用 await 关键字等待异步操作 fetch 和 json 转换完成，然后返回数据。最后通过 then 方法处理返回结果。
如何使用 async/await 处理异步操作
使用 async/await 发起 Ajax 请求
在实际开发中，我们经常需要发起 Ajax 请求获取数据。我们可以使用 fetch 方法来发送请求并获取数据。
async function fetchData(url) {
const response = await fetch(url);
const data = await response.json();
return data;
}
fetchData('/data.json').then(data => console.log(data));上面的代码中，fetch 方法返回一个 Promise 对象，使用 await 让 fetchData 等待请求的结果返回。然后使用 response.json() 方法获取结果，并将返回结果转换为 JSON 对象。
使用 async/await 操作 DOM
async/await 不仅可以应用于 Ajax 请求，还可以应用于 DOM 操作。下面的例子中，我们通过 async/await 来实现动画效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>async/await animation</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<button onclick="start()">start</button>
<div></div>
<script>
async function start() {
const div = document.querySelector('div');
for (let i = 0; i < 100; i++) {
await new Promise(resolve => setTimeout(resolve, 100));
div.style.transform = `translate(${i}px, ${i}px)`;
}
}
</script>
</body>
</html>在上面的代码中，我们首先定义了一个异步函数 start。在 start 函数中，我们使用 await 等待 Promise 对象返回，然后修改 div 元素的 transform 样式来实现动画效果。通过使用 async/await，我们避免了使用回调函数或 Promise 的复杂回调嵌套，使得代码更加清晰。
async/await 中的错误处理
在异步操作中，经常会遇到错误情况。我们可以使用 try/catch 语句来处理异步操作中的错误，如下所示：
async function fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error(error);
return null;
}
}在上面的代码中，我们用 try/catch 来捕获异步操作中的错误。如果出现错误，我们使用 catch 捕获错误，并输出错误信息。
总结
使用 async/await 可以让我们更加优雅地编写异步代码。通过结合 Promise 和 generator 的优点，我们可以使用同步的方式编写异步代码，使得代码更加清晰易懂。在实际开发中，我们可以使用 async/await 处理 Ajax 请求、DOM 操作、动画效果等异步操作，同时还要注意异步操作中的错误处理。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a4c78cadd4f0e0ffd1cf44