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开发者工具控制台数据这样子的