async_await函数的使用小案例

fengyehongWorld

已于 2022-03-01 08:33:21 修改

阅读量254

点赞数

分类专栏： # JS 文章标签： javascript

于 2021-09-24 22:58:43 首次发布

本文链接：https://blog.csdn.net/feyehong/article/details/120464627

版权

JS 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

<!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>