fetch()的用法

fetch () 是 XMLHttpRequest 的升級版，用於在 JavaScript 腳本里面發出 HTTP 請求。

fetch()的功能與 XMLHttpRequest 基本相同，但有三個主要的差異。

（1）fetch()使用 Promise，不使用回調函數，因此大大簡化了寫法，寫起來更簡潔。

（2）采用模塊化設計，API 分散在多個對象上（Response 對象、Request 對象、Headers 對象），

更合理一些；相比之下，XMLHttpRequest 的 API 設計並不是很好，輸入、輸出、狀態都在同一個接口管理，容易寫出非常混亂的代碼

（3）fetch()通過數據流（Stream 對象）處理數據，可以分塊讀取，有利於提高網站性能表現，

減少內存占用，對於請求大文件或者網速慢的場景相當有用。XMLHTTPRequest 對象不支持數據流，

所有的數據必須放在緩存里，不支持分塊讀取，必須等待全部拿到后，再一次性吐出來。在用法上接受一個 URL 字符串作為參數

，默認向該網址發出 GET 請求，返回一個 Promise 對象

做個例子：

寫個數據

{
    "status": 200,
    "data": {
        "name": "web211001",
        "student": [
            {
                "id": 10001,
                "name": "張三"
            },
            {
                "id": 10001,
                "name": "李四"
            },
            {
                "id": 10001,
                "name": "王五"
            }
        ]
    },
    "msg": "錯誤信息"
}

使用fetch()請求：

 <script>
        /*
        then response
        then data  第二個then傳的才是參數
        */
        fetch('./data.json',{})//第一個請求地址，第二個值請求參數，第二個有就傳，沒有就不寫
        // .then(function (response) {
        //         //執行的是resolve
        //         return response.json();
        //     })   //第一塊固定寫法
            .then(function (response) {
                //執行的是resolve
                return response.json();
            })
            .then(function (data) {
                console.log(data);
            })
            .catch(function () {
                //執行的reject
            })
    </script>

打開網頁F12開發者工具控制台數據這樣子的