原生Js呼叫Fetch Api請求介面（新的Ajax解決方案）

TANKING發表於2022-05-16
JSAPI

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

Demo

image.png

作者

Author:TANKING

相關文章