async 和 await小案例

Async和await是ES6中关于异步编程的两个重要概念，通过它们可以更加方便地管理异步任务，使代码更加清晰简洁。下面是一个简单的小案例，用来说明async和await的用法。

案例描述：
假设有一个API，用来获取用户的基本信息，但由于API返回数据的速度非常慢，此过程需要一定时间。我们需要使用异步任务来获取用户信息，同时当获取成功时将用户信息渲染到页面上。

首先，我们可以使用async和await来封装异步任务：

async function getUserInfo() {
const response = await fetch('api/user');
const data = await response.json();
return data;
}

接着，我们在代码中使用上述异步任务来获取用户信息，并渲染到页面上：

async function loadUserInfo() {
const userInfo = await getUserInfo();
const name = userInfo.name;
const age = userInfo.age;
const gender = userInfo.gender;

document.getElementById('username').innerHTML = name;
document.getElementById('age').innerHTML = age;
document.getElementById('gender').innerHTML = gender;
}

最后，我们调用loadUserInfo()函数来完成整个过程：

loadUserInfo();

通过async和await，我们可以非常方便地进行异步编程，并且代码更加简洁易懂。虽然在实际开发中还需要注意一些问题，如错误处理等，但使用async和await可以大大提高代码的可读性和可维护性。