关于javascript:原生Js调用Fetch-Api请求接口新的Ajax解决方案

4次阅读

共计 1767 个字符，预计需要花费 5 分钟才能阅读完成。

Fetch Api 是新的 ajax 解决方案，Fetch 会返回 Promise；Fetch 不是 ajax 的进一步封装，而是原生 js，没有应用 XMLHttpRequest 对象。

前端与后端交互数据的技术始终在更新，而最后的 XMLHttpRequest 对象始终被 AJAX 操作所承受，然而咱们晓得，XMLHttpRequest 对象的 API 设计并不是很好，输出、输入、状态都在同一个接口治理，容易写出十分凌乱的代码。

那么 Fetch API 就应势而生，提供了一种新标准，用来取代善不完满的 XMLHttpRequest 对象。

一是接口合理化，AJAX 是将所有不同性质的接口都放在 XHR 对象上，而 Fetch 是将它们扩散在几个不同的对象上，设计更正当；二是 Fetch 操作返回 Promise 对象，防止了嵌套的回调函数。

index.html

<!DOCTYPE html>
<html>
<head>
    <title>fetch 示例 </title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <div id="songs"></div>
    <script type="text/javascript">
        window.onload = function(){fetch('data.json')
            .then(response => response.json())
            .then(data => {for(var i in data){console.log(data[i].songName)
                    // 创立一个 p 标签
                    var p=document.createElement("p");
                    // 为 p 标签设置 class
                    p.setAttribute("class","songName");
                    // 向 p 标签渲染数据
                    p.innerHTML = data[i].singerName+'-'+data[i].songName;
                    // 抉择 p 标签的上一级元素
                    var div=document.getElementById("songs");
                    // 将 p 标签增加到上一级元素外面
                       div.appendChild(p);
                }
               })
            .catch(err => console.error(err));
        }
    </script>
</body>
</html>

data.json

[{"songName":"七里香","singerName":"周杰伦","headimg":"https://y.qq.com/music/photo_new/T001R150x150M0000025NhlN2yWrP4.jpg?max_age=2592000"},
    {"songName":"孤勇者","singerName":"陈奕迅","headimg":"https://y.qq.com/music/photo_new/T002R300x300M000001uaPM93kxk1R_3.jpg?max_age=2592000"},
    {"songName":"有何不可","singerName":"许嵩","headimg":"https://y.qq.com/music/photo_new/T001R150x150M000000CK5xN3yZDJt.jpg?max_age=2592000"},
    {"songName":"一路生花","singerName":"温奕心","headimg":"https://y.qq.com/music/photo_new/T002R300x300M000001MyK3Y47zLur_2.jpg?max_age=2592000"},
    {"songName":"晚风心里吹","singerName":"阿梨粤","headimg":"https://y.qq.com/music/photo_new/T002R300x300M000001whii43nuvNe_2.jpg?max_age=2592000"}
]

留神：请开启 http 服务后拜访 index.html

Author:TANKING

正文完