一、XHR介绍
xhr，全称为XMLHttpRequest，用于与服务器交互数据，是ajax功能实现所依赖的对象，jquery中的ajax就是对xhr的封装。
二、XHR使用
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。
XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。
xhr 接口强制要求每个请求都具备严格的HTTP语义–应用提供数据和URL，浏览器格式化请求并管理每个连接的完整生命周期，
所以XHR仅仅允许应用自定义一些HTTP首部，但更多的首部是不能自己设定的。
浏览器会拒绝绝对不安全的首部重写，以保证应用不能假扮用户代理、用户或请求来源，
如Origin由浏览器自动设置，Access-Control-Allow-Origin由服务器设置，如果接受该请求，不包含该字段即可，浏览器发出的请求将作废。
如果想要启用cookie和HTTP认证，客户端必须在发送请求时通过XHR对象发送额外的属性（withCredentials），
而服务器也需要以Access-Control-Allow-Credentials响应，表示允许应用发送隐私数据。同样，如果客户需要写入或读取自定义HTTP标头或想要使用“非简单的方法”的请求，
那么它必须首先通过发出一个预备请求，以获取第三方服务器的许可
三、Fetch
fetch()方法与XMLHttpRequest类似，fetch也可以发起ajax请求，但是与XMLHttpRequest不同的是，fetch方式使用Promise，相比较XMLHttpRequest更加的简洁。
fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装，而是原生js。Fetch函数就是原生js，没有使用XMLHttpRequest对象。
四、Fetch使用
1.Promise
Promise是进行异步操作的一种解决方案，比传统的处理方法(回调函数/处理事件)更加合理，ES6将其写入了语言标准,统一了语法，原生提供了Promise。
Promise可以想象成一个装有各种结果的容器，里面装有某个时间返回来的结果，你可以在需要的时候拿取它并进行一些事件处理。
2.fetch的配置
Promise fetch(String url [, Object options]);
Promise fetch(Request req [, Object options]);
3.
ajax
使用步骤
1.创建XmlHttpRequest对象
2.调用open方法设置基本请求信息
3.设置发送的数据，发送请求
4.注册监听的回调函数
5.拿到返回值，对页面进行更新
fetch
特点
1、第一个参数是URL:
2、第二个是可选参数，可以控制不同配置的 init 对象
3、使用了 JavaScript Promises 来处理结果/回调:
更多详情：https://www.jianshu.com/p/7762515f8d1a
五、fetch和ajax 的主要区别
1、fetch()返回的promise将不会拒绝http的错误状态，即使响应是一个HTTP 404或者500
2、在默认情况下 fetch不会接受或者发送cookies