再谈异步请求
Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。
在浏览器，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。通过XHRHttpRequest对象及时监听完成事件，执行事件回调函数不会堵塞程序运行。
关于Fetch
Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合乎逻辑的方式来跨网络异步获取资源。这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如 CORS和HTTP的扩展。
新的Fetch API是XHRHttpRequest异步请求的另一种方案，比起其复杂糅杂的写法，fetch能更简洁的获取到数据。
XHRHttpRequest使用事件回调函数容易进入回调地狱，而Fetch Api接收url参数返回Promise对象。
Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义。使之今后可以被使用到更多地应用场景中
Fetch的简单使用
let url = 'http://jsonplaceholder.typicode.com/users'fetch(url).then((res)=>{ console.log(res)}).catch((err)=>{}) 将url传递给fetch时会立即返回一个promise对象此时的状态是pending，当promise被通过时会返回一个response对象。如果我们用习惯了比如jquery封装好的ajax方法，很容易会以为上面的res就是返回的data。
fetch 只有在遇到网络错误的时候才会 reject 这个 promise，比如用户断网或请求地址的域名无法解析等。只要服务器能够返回 HTTP 响应（甚至只是 CORS preflight 的 OPTIONS 响应），promise 一定是 resolved 的状态。
fetch返回Promise对象
Response简介
-
response.type有以下几种
basic 标准值，同源响应
cors 收到一个有效的跨域请求
opaque 跨域请求但服务器没有返回cors响应头
但是无效的跨域请求如果像下面这么写，其实根本无法拿到response对象
-
request.mode用于确定跨域请求是否导致有效的响应
-
same-origin 同源情况下才可请求成功，否则抛出错误
比如在有效的跨域请求设置这个模式会提示
Fetch API cannot load Request mode is "same-origin" but the URL's origin is not same as the request origin file://.
cors: 表示同域和带有CORS响应头的跨域下可请求成功.
cors-with-forced-preflight: 表示在发出请求前, 将执行preflight检查.
no-cors: 用于跨域相应不带cors的情况，此时相应类型为opaque
-
-
根据上面的错误修改fetch的模式就可以返回response对象了，可以对比发现无效跨域请求并没有返回什么有价值的信息例如url，status，statusText等
-
reponse.body属于ReadableStream类型
当读取CSV等大文件时通过流来读取，可以选择在读取到要获取的数据后停止流，而不是获取到全部响应数据再去查找。
对于常用返回的几种数据类型，可以使用blob()、text()、formData()、json()，这几种方法都会讲body标记为已读数据，所以想再次获取的时候就会报错
比如下面的代码，真实返回的数据不是json类型的，想利用catch方法去捕获然后再次返回text类型，浏览器时会报TypeError: Already read
fetch(url).then(function(response) { return response.json().catch(function() { return response.text(); });}); -
正确的方式是使用clone()方法先对数据进行拷贝，响应数据通过clone并不会被回收，一直留在内存中，直至被读取
fetch(url).then(function(response) { return response.clone().json().catch(function() { return response.text(); });});
Request简介
method：设置请求方法，默认GET方法
-
credentials fetch方法默认不发送cookies，如果遇到401 Unauthorized没有权限问题就要看看是否有设置credentials
omit: 从不发送cookies.
same-origin: 只有当URL与响应脚本同源才发送cookies.
include: 总是发送cookies, 即使来自跨域的请求
默认情况下请求不带coookie
-
cache 设置缓存，跟XHR对比在请求时就可以控制缓存，虽然这是有争议的，因为这暴露了用户历史记录
-
default
如果是最新的资源，则返回缓存
如果资源已过期则向服务器发出条件请求；如果服务器指示资源没有改变则返回缓存；否则从服务器中下载，并更新缓存。
如果没有找到缓存则发出正常情求，但不缓存资源。
no-store 直接从服务器获取资源并且不会将资源缓存
reload 直接从服务器获取资源，并且缓存资源
-
no-cache
如果资源有效或者过期，浏览器会发出一个条件请求，如果服务器返回没有改变，则返回缓存，否则，重新获取资源并更新缓存
如果不存在资源则浏览器发出正常请求下载并更新缓存
-
force-cache
如果有缓存直接返回缓存，否则下载更新资源
-
only-if-cached
如果有缓存直接返回缓存，否则浏览器返回错误
-
XHR和Fetch其他的对比
fetch没有xhr中的abort()方法来中断请求
fetch没有progress进度事件监听数据，但是你可以通过获取content-length计算进度
XHR open方法有最后一个参数设为false的时候是同步请求，fetch没有提供同步请求的方法，但同步请求并不常用
fetch 并没有像XHR的timeout属性来设置延时
Fetch实践体验
习惯了像是vue-resource等插件封装好的get,post方法，在使用fetch的时候很容易会被它看似简洁的api给迷惑
-
fetch兼容性问题
我们需要引入fetch 的polyfill，扒开源码我们可以发现实现原理还是建立在XMLHttpRequest上的，但是由于polyfill要实现fetch如Blob类文件对象等，在safari和ie上还是有兼容性问题的
-
参数传递问题
-
在get请求方式中，我们还是只能像xhr那样以拼接url字符串的方式来传递，这与fetch看起来简洁的api有点不符。
虽然原生的URLSearchParams 接口定义了用来处理 URL 参数串的方法。但是这个api目前兼容性也是不怎么好
var paramsString = "q=URLUtils.searchParams&topic=api"
var searchParams = new URLSearchParams(paramsString);searchParams.append("topic", "webdev");searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev" -
在post请求中，数据要以body字段来传递参数，也就是说我们要常用的json格式要经过下面格式的转换，就像XMLHttpRequest那样
body 可以是以下任何一种类型的实例：
ArrayBufferArrayBufferView (Uint8Array and friends)Blob/FilestringURLSearchParamsFormData
-
-
响应数据的问题
在回调函数中我们首先接受到的是response对象，由于body是ReadableStream类型，几乎很难预先判断数据是什么类型，也就很难判断是到底用text()、json()方法解析数据
-
response对象有一个bodyUsed的属性初始是false，调用text()、json()等方法会读取Response对象并且将它设置为已读，这时bodyUsed为true
bodyUsed初始值为false
- 解决办法有两种但都有一定的不足 1.是通过clone加catch方式找到正确的输出方式，但是要注意调用方法的顺序，不然一个json有可能最后还是以text的方式解析，还要注意的是最后要将response的数据回收或者读取，因为clone方法的读取并不影响原来的reponse对象
fetch(url).then(function(response) { return response.json().catch(function() { return response.text(); });}); 2.是通过判断content-type的方式，如果已知的返回格式不多的情况下用还是不错的选择
fetch(url).then(function(response) { if (response.headers.get('Content-Type') === 'application/json') { return response.json(); } return response.text();}); 小结
基于promise的fecth方法可以让我们远离回调地狱而不需要其他的封装。
fetch 将 response.body 设计成 ReadableStream 其实是非常有前瞻性的，这种设计让你在请求大体积文件时变得非常有用。
参考资料：