fet 请求三种数据类型

最新推荐文章于 2021-05-05 22:51:02 发布

炉火纯青-旺

最新推荐文章于 2021-05-05 22:51:02 发布

阅读量351

点赞数

分类专栏： ES6 文章标签： es6

本文链接：https://blog.csdn.net/qq_34870529/article/details/94335622

版权

ES6 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>fetch</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/skeleton/2.0.4/skeleton.min.css">
</head>
<body>
    <div class="container">
        <h1>Fetch Api sandbox</h1>
        <button id="button1">请求本地文本数据</button>
        <button id="button2">请求本地json数据</button>
        <button id="button3">请求网络接口</button>
        <br>    <br>   
        <div id="output"></div>
    </div>
    <script>
        document.getElementById("button1").addEventListener('click',getText);
        document.getElementById("button2").addEventListener('click',getJson);
        document.getElementById("button3").addEventListener('click',getExternal);

        // 获取本地纯文本数据
        function getText () {
            fetch ("text/test.txt")
                .then((res) => res.text())    // 解析txt数据
                .then((data) => {
                    console.log(data);
                    document.getElementById("output").innerHTML = data;
                })
                .catch((err) => console.log(err))
        }

        // 获取本地json数据
        function getJson () {
            fetch ("json/test.json")
                .then((res) => res.json())
                .then((data) => {
                    console.log(data);
                    let output = '';
                    data.forEach(post => {
                        output += `<li>${post.title}</li>`
                    });
                    document.getElementById("output").innerHTML = output;
                })
                .catch((err) => console.log(err))
        }

        // 获取网络接口数据
        function getExternal () {
            fetch ("http://api.github.com/users")
                .then((res) => res.json())
                .then((data) => {
                    console.log(data);
                    let output = '';
                    data.forEach((user) => {
                        output += `<li>${user.login}</li>`
                    })
                    document.getElementById("output").innerHTML = output;
                })
                .catch()
        }
    </script>
</body>
</html>

炉火纯青-旺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
fet 请求三种数据类型

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫