fetch的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;
        }
        
        body {
            background-color: #f1f2f6;
        }
        
        #root {
            padding: 24px 8vw;
        }
        
        li {
            list-style: none;
            margin: 16px 0;
        }
        
        a {
            display: block;
            text-decoration: none;
            color: #2f3542;
            font-size: 18px;
            /* 超过部分省略 */
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            transition: 0.3s;
            max-width: 100vw;
        }
        
        a:hover {
            color: #1e90ff;
        }
    </style>
</head>

<body>
    <div id="root"></div>
    <script>
        async function getData() {
            // 获取 response
            const response = await fetch("http:127.0.0.1:9999/api/slider/getSliders");
            // 获取结果 JSON
            const posts = await response.json();

            // 打印结果
            console.log(posts);

            // 获取 root element
            const root = document.querySelector("#root");

            // 创建 ul
            const ul = document.createElement("ul");

            // 对于每篇文章,创建一个 li,再在里边创建一个 a,然后把结果追加到 ul 
            posts.data.forEach(post => {
                console.log(post, 'post')
                const li = document.createElement("li");
                li.appendChild(document.createTextNode(post.imageNsme));
                const anchor = document.createElement("img");

                anchor.setAttribute(
                    "src",
                    `${post.imageUrl}`
                );
                anchor.style = "width:80px;height:80px;border-radius:5px;"

                li.appendChild(anchor);

                ul.appendChild(li);
            });
            //  root 追加到 ul 
            root.appendChild(ul);
        }

        // 调用函数
        getData();
    </script>
</body>

</html>

效果图:

fetch的使用_第1张图片

你可能感兴趣的:(javascript,前端,开发语言)