原生Js调用Fetch Api请求接口(新的Ajax解决方案) - TANKING 创意开发者

原生Js调用Fetch Api请求接口(新的Ajax解决方案)

2022-08-18 2157 阅读 Javascript

Fetch Api


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


前端与后端交互数据的技术一直在更新,而最初的XMLHttpRequest对象一直被AJAX操作所接受,但是我们知道,XMLHttpRequest对象的API设计并不是很好,输入、输出、状态都在同一个接口管理,容易写出非常混乱的代码。


那么Fetch API就应势而生,提供了一种新规范,用来取代善不完美的 XMLHttpRequest 对象。


Fetch Api主要有两个特点


一是接口合理化,AJAX是将所有不同性质的接口都放在XHR对象上,而Fetch是将它们分散在几个不同的对象上,设计更合理;二是Fetch操作返回Promise对象,避免了嵌套的回调函数。


Fetch Api请求Json


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