fetch 详解

作者: eveah | 来源:发表于2019-02-19 18:02 被阅读0次

fetch 详解
fetch 详解
fetch 详解
Fetch Api 详解
git fetch 详解
Good Article For Git
前端 | 浅谈axios
3.2 PHP内置MySQL函数学习(2)
mysqli_result::fetch_array
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的源码的时候发现了这个