h5 fetch的 原理 使用 学习总结

   ==================Fetch 简介 ===========================
        XMLHttpRequest 的问题
        1. 所有的功能全部集中在同一个对象上,容易书写出混乱不易维护的代码
        2. 采用传统的事件驱动模式,无法适配新的 Promise Api
        Fetch Api 的特点
        1. 并非取代 AJAX, 而是对 AJAX传统的 API
        2. 精细的功能分隔: 头部信息, 请求信息, 响应信息等均分布到不同的对象,更利于处理各种复杂的 AJAX场景
        3. 使用 Promise API, 更利于异步代码的书写
        4. Fetch Api 并非 ES6 的内容, 属于 HTML5 新增的 Web Api
        ================================Fetch 基本使用==========================
        使用 fetch() 函数即可立即向服务器发送网球请求
        参数: 该函数有两个参数
        1. 必填, 字符串, 请求地址 
          例如:
            function getProvinces() {
            const url = "http://101.132.72.36:5100/api/local";
            fetch(url)
             }
        2. 选填, 对象, 请求配置
        请求配置的对象:
        1. methods: 字符串,请求方法,默认GET
        2. headers: 对象, 请求头信息, 在request,或者respond内部转为一个Header对象
            header对象方法:
              has(key): 判断请求头里面是否存在某个配置inx
              get(key): 得到请求头里面的值
              set(key, value): 修改对应的请求头的数据
              append(key, value): 添加对应的请求头
              keys(): 获取所有请求头的key数组
              values(): 获取所有请求头的value数组
              entries(): 获取所有键值对数组
        3. body: 请求体的内容,必须匹配请求头的 Content-Type (post 请求才需要)
        4. mode: 字符串,请求模式
              cors: 默认值,配置为该值, 会在请求中加入 origin 和 referer 需要跨域
              no-cors: 配置为该值, 不会在请求中加入 origin 和 referer, 跨域的时候可能会出现问题
              same-origin: 指示请求必须在同一个域中发生,如果其他跨域,则报错
        5. credentials: 如果携带凭据(cookie) 
              omit: 默认值, 不携带cookie
              same-origin: 请求同源地址携带cookie
              include: 请求任何地址都携带cookie (cookie使用的频率越来越少)
        6. cache: 配置缓存模式     
              default: 表示fetch请求之前将检查一些HTTP的缓存
              no-store: 表示fetch请求完全忽略HTTP的缓存存在,意味着请求之前将不在检查HTTP的缓存,拿到响应后,也不会更新HTTP缓存
              no-cache: 如果存在缓存,那么fetch将发送一个条件查询request和一个正常的request, 拿到响应后, 更新HTTP缓存
              reload: 表示fetch请求之前将忽略HTTP缓存的存在,拿到求情的结果后,将主动更新HTTP缓存
              force-cache: 表示fetch请求不顾一切的依赖缓存,即使缓存过期了,它依然是从缓存中读取,除非没有缓存,那么将发送一个正常的HTTP请求
              only-if-cached: 表示fetch不顾一切一拉缓存,即使缓存过期了,它依然从缓存中货期,如果没有缓存,将抛出一个网络错误(该设置只在mode为"same-origin"时候有效)
      例如:
        function getProvinces() {
            const url = "http://101.132.72.36:5100/api/local";
            const config = {
                methods: "GET",
                headers: {
                    "Content-Type": "application/json",
                }
            }
            fetch(url, config)
        }
        fetch的返回值:
        返回的是一个promise的对象
            当服务器的返回结果后,promise进入resolve状态,状态数据为 Response对象
            当网络发送错误(或其他导致无法完成交互的错误)时, Promise 进入 rejected状态,状态数据为错误信息
        Response对象:
           ok: boolean,当响应消息码在200-299之间时候为true
           status: number 表示服务器响应的状态码
           text(): 用于处理文本格式的 Ajax响应.它从响应中获取文本流,将其读完,然后返回一个
             被解决为string对象的Promise
           blob(): 用于处理二进制文件格式(比如:图片或者电子表格)的Ajax响应.他读取文件的
              原始数据,一旦读取完整个文件,就返回一个被解决为blob对象的Promise
           json(): 用于处理JSON格式的AJAX的响应,他将JSON数据流转换成一个被解决为JavaScript对象的Promise
           redirect(): 跨域用于重定向到另一个URL. 他会创建一个新的Promise,以解决
              来自重定向的URL的响应 
           注意:
            respond对象也可以自己创建   
         Request对象:
           除了使用基本的fetch方法,还可以通过创建一个Request对象来完成请求(实际上,fetch的
            内部会自己创建一个Request对象)
            使用方法:   
            fetch(new Request("http://101.132.72.36:5100/api/local", 配置))
            注意点:
             尽量每一次使用的一个新的Request对象
            // 获取一个request对象,请求头
            function getRequest() {
                if (!req) {
                    const url = "http://101.132.72.36:5100/api/local";
                    req = new Request(url, {});
                }
                return req.clone() // 克隆一个全新的request对象
            }