<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">点击展示头像3秒钟</button>
</body>
<script>
// await必须要配合async使用,也就是说await只能在函数内部使用,await后面必须要跟一个Promise实例对象
async function showAvatar() {
// 访问Github的api获取fengyehong123的用户信息,并从中解构出login信息
let response = await fetch('https://api.github.com/users/fengyehong123');
const {login} = await response.json();
console.log(login); // fengyehong123
// 读取github用户信息,因为是调用外部的接口,所以是一个耗时操作
let githubResponse = await fetch(`https://api.github.com/users/${login}`);
let githubUser = await githubResponse.json();
// 因为我们使用了async和await,所以在调用接口获取到头像的url之前,下面的显示头像代码不会执行
let img = document.createElement('img');
img.src = githubUser.avatar_url;
img.className = "promise-avatar-example";
document.body.append(img);
// 等待3秒,因为使用了await和Promise,所以在3秒结束之前,用户的头像不会被移除
await new Promise((resolve, reject) => setTimeout(resolve, 3000));
// 3秒之后,移除用户的头像
img.remove();
return githubUser;
}
document.querySelector("#btn").addEventListener('click', async() => {
// 调用展示用户头像的函数
const {login} = await showAvatar();
console.log(`展示的用户的id为${login}`);
})
</script>
</html>