h5的fetch方法使用时，设置headers时的问题

很恶心，Headers这个鬼东西私自修改了你设置的headers的大小写。

解决方法:

对的，你不一定非要想某些官网的demo一样，非要使用 new Headers({})来设置headers；

1,浏览器原生支持，不需要额外引入别的ajax库。

2，代替以前的XHR，是前端技术的前进方向。

3，可以搭配使用 async/await使用语法更简单。

1，一些古董浏览器可能不会支持

2，fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理

3，fetch默认不会带cookie，需要添加配置项

4，无法判断请求进行的状态

1， 方式一 使用原生XHR发送请求

    function XHRAjax(url, type， params) {

        var xhr = new XMLHttpRequest()//创建啊一个XMLHttpRequest()实例

        xhr.onreadystatechange = function () {

            if (xhr.readyState == 4) {

                if ((xhr.status >= 200 && xhr.status < 300) || xhr == 304) {

                    console.log(xhr.responseText)

                } else {

                    console.log("request is fail" + xhr.status)

                }

            }

        }

        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")//设置请求头

        xhr.open(type, url, true)

        xhr.send(params)

    }

2，方式二 使用jquery ajax写法

    function JQAjax(url, type, params) {

        $.ajax({

            type: type,

            data: params,

            contentType: 'application/x-www-form-urlencoded',

            url: url,

            success: function (data) {

                console.log(data)

            },

            error: function (err) {

                console.log(err)

            }

        })

    }

3，方式三 使用axios写法

    async function axiosAjax(url, type , params) {

        var re = await axios({

            url: url,

            data: params,

            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

            method: type

        })   

        return re

    }

4， 方式四 使用fetch写法

async function fetchAjax(url, type, params) {

        var response = await fetch(url, {

            method: type,

            headers: {

                'Content-Type': 'application/x-www-form-urlencoded'

            },

            body: params

        })

        var re=await response.json

        return re

    }

通过对比以上几种写法，原生xhr写法太麻烦，还需自己处理浏览器兼容问题。jquery ajax其实很强大，jquery在以前普及率非常高，但现在已经被mvvc框架替代。axios当前也比较成熟，很多项目都在使用，可以结合async/await一起使用非常方便。使用fetch不需要引入别的ajax库，未来会越来越普及，但是使用过程中可能会遇到很多坑。个人建议，在项目开发尽量使用axios，个人学习上多使用fetch紧跟前端技术前进的步伐。

示例源码地址   https://github.com/panergongzi/ajaxDemo.git

1， 《传统 Ajax 已死，Fetch 永生》 ,2， 《fetch没有你想象的那么美》 3， 《fetch使用的常见问题及解决方法》

4， https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

1 .fetch支持通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。

2 .

1 .fetch使用promise,而不是回调函数

2 .fetch采用模块化设计,API分散在多个对象上.

3 .fetch通过数据流处理对象,可以分块读取,有利于提高网站性能表现,减少内存占用,对于请求大文件或者网速慢得场景相当有用

4 .XMLHttp对象不支持数据流,所有的数据必须存放在缓存里,不支持分块读取,必须等待全部拿到之后,在一次性吐出来

1 .fetch接收到的response是一个流对象,是服务器的回应

2 .fetch('url').then(response=>response.json())

3 .

4 .response包含的数据通过Stream接口异步读取,一些同步属性可以马上读取到

5 .可以读取到的同步属性

6 .headers属性:指向一个Header对象,对应HTTP回应的所有标头

7 .读取内容的方法:根据服务器返回的不同类型的数据,提供了不同的读取方法

1 .正常情况下,response对象只能被读取一次,读取一次就没了,因为他是流对象

2 .如果想要多次读取,需要创建Response对象的副本,实现多次读取

3 .现在可以多次读取了

const response1 = await fetch('flowers.jpg')

const response2 = response1.clone()

1 .返回一个ReadableStream对象,可以分块读取内容,让用户 *** 作

1 .fetch发出请求之后,只有网络错误,无法连接才会报错,其他任何情况都认为是请求成功

2 .服务器返回的状态码是4XX,5XX,fetch也不会报错,promise不会变为rejected状态

3 .只有通过Response.status属性,得到http回应的真实状态码,才能判断是否请求成功,还有一种就是判断response.ok是否为true

1 .第一个参数是url,第二个参数作为配置对象,定制发出的http请求

2 .POST请求

3 .不能通过headers设置的属性,Content-Length,Cookie,Host,是浏览器自动生成的

3 .提交表单

4 .上传文件,先不考虑.但是可以直接上传二进制文

1 .cache:指定如何处理缓存

2 .mode:指定请求的模式

3 .credentials:指定是否发送Cookie

4 .signal:指定一个AbortSignal实例,用于取消fetch请求

5 .keep-alive:页面卸载时,告诉浏览器在后台保持连接,继续发哦是那个数据

6 .redirect:指定http跳转的处理方法

7 .integrity:指定一个哈希值,用于检查HTTP回应传回的数据是否等于这个预先设定的哈希值

8 .referrerr:用于设定fetch请求的referer标头

9 .referrerPolicy:设定referer标头的规则

---