fetch 详解

fetch请求出来了一段时间,短暂的在项目中使用过.这次好好学习汇总一下.

第一: fetch的使用
    https://github.com/github/fetch  这个是fetch的github 上面给出了fetch用法.
    https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch 这个是fetch的mdn文档,更加的详细.
    查看两份文档的时候,github上面没有设置headers 而在 mdn上有.一开始我也很迷茫,最后我读到了一句话

fetch会自动匹配request 和 response 的content type 

因为fetch 会自己的匹配数据类型设置 content type, 所以发送json 或者formdata 等其他数据类型的时候,不需要你手动设置.
so intelligently.

官方例子

所以在大部分使用的的情况下,直接使用就行. 和传统的ajax比起来,fetch 使用起来更加方便,少了繁琐的配置,又是基于promise,开发者专注于业务就行.
第二: fetch 的缺点
    1.兼容性,fetch的兼容性并不太好,ie 和 safari 都不支持

fetch 兼容性

在移动端和pc端 兼容性不好因为 返回的reponse body 是readable stream 不支持. 
解决方案: 使用第三方库 whatwg-fetch, 如果同构在node端使用isomorphic-fetch.

 2.fetch 请求默认不带cookie
前端请求的时候都会设计到token 权限验证,很多时候是存在cookie里面的.fetch里面又一个参数credentials设计cookie
credentials 有三个值:
                            omit: 默认值，忽略cookie的发送
                            same-origin: 表示cookie只能同域发送，不能跨域发送
                            include: cookie既可以同域发送，也可以跨域发送 ( 推荐使用)
推荐使用include.

3.fetch 跨域问题
  fetch跨域也有对应的参数设置mode
                                same-origin：该模式是不允许跨域的，它需要遵守同源策略，否则浏览器会返回一个error告知不能跨域；其对应的response type为basic。
                                cors: 该模式支持跨域请求，顾名思义它是以CORS的形式跨域；当然该模式也可以同域请求不需要后端额外的CORS支持；其对应的response type为cors。
                                no-cors: 该模式用于跨域请求但是服务器不带CORS响应头，也就是服务端不支持CORS；这也是fetch的特殊跨域请求方式；其对应的response type为opaque。

4.fetch 返回400 500 问题

fetch 返回问题描述

当一个请求发送完成,服务返回状态码,fetch 不会reject这个response,仍然resolve,但是 response.ok 会设置成false.很多时候我们会二次封装fetch reject error.

处理 404 500

5 fetch 无法 abort 请求 和timeout
目前fetch 没有传统ajax 的abort 方法,还在草案之中

abort 草案

abort  解决方案

给fetch内部的promise添加一个abort方法--实际就是reject一个error.

timeout 解决方案

使用promise 的race, 因为promise 里面的resolve 和 reject 只能执行一次, 利用race reject 一个error.
上面的abort 并没有真正的abort 此次请求,只是通过promise promise reject 一个error而已.我在翻阅fetch的源码的时候发现了这个

fetch abort

在配置中确实又一个signal 参数可以abort 请求,发现是基于AbortController,但是这个是一个实验中属性,基本不能使用.
以上是我对fetch粗浅的总结,有不足的地方欢迎指出.