async_await函数的使用小案例

2021/9/24 23:11:27

编程Tag： async await let 头像 img login 案例

本文主要是介绍async_await函数的使用小案例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

这篇关于async_await函数的使用小案例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

async_await函数的使用小案例

相关编程文章