fetch 是浏览器提供的一个新的 web API，它用来代替 Ajax（XMLHttpRequest），其提供了更优雅的接口，更灵活强大的功能。以下我们来看下 fetch 和传统 Ajax 有什么区别：
请求
我们从发请求的接口参数开始看起：
fetch( '/v1/accounts', {
method:
headers:
body:
credentials:
mode:
cache：
redirect:
referrer:
referrerPolicy:
integrity:
} )
method，headers
关于发送方式和请求头这两个参数，XMLHttpRequest 拥有同样的功能。
body
请求体，或者我们可以狭义的理解为请求所携带的参数。fetch 接口可以接收 Blob，ArrayBuffer，FormData，String 等多种形式的参数。 XMLHttpRequest 虽然也可以接收这些类型的参数，但是如果在低版本的浏览器中像 Blob 就没有这种格式。所以传统的 Ajax 在这方面支持情况还取决于浏览器。
credentials
控制请求是否带上 cookie 等机密信息。fetch 可接收如下三种值：
- omit: 请求不带任何 cookie。
- same-origin: 同域请求会带上 cookie。
- include: 无论是否跨域都会带上 cookie。
XMLHttpRequest 对应也有一个 withCredentials 标志位对应此参数，但是 withCredentials 只有两个取值：
- true: 大致对应上面的 include，MDN 上描述此 flag 不止控制 cookie 还控制 authorization headers 或者 TLS client certificates。
- false: 大致对应上面的 omit，MDN 上描述为 false 时还控制跨域请求的 response 不能设置 cookie。
mode
设置请求方式的标志位。fetch 可以通过设置这个标志位从发起请求阶段就阻止跨域请求。而 XMLHttpRequest 并没有对应的标志位，只能先发出请求然后通过检测 response 头中是否有允许跨域的字段来判断是否要阻止接收 response。
- same-origin: 及以下详见 MDN_Request.mode
- no-cors
- cors
- navigate
cache
控制 fetch 请求如何和 HTTP 缓存协作的，我简单测试了下，fetch 似乎不是通过加 request 头来实现的，所以 XMLHttpRequest 没有对应的字段。
- default: 及以下详见 MDN_Request.cache
- no-store:
- reload:
- no-cache:
- force-cache:
- only-if-cached:
redirect
设置请求如果遇到重定向的返回如何响应：
- follow: 跟随重定向
- error: 如果 response 是重定向，则报错
- manual: 自定义行为
XMLHttpRequest 没有对应的字段。
referrer
设置请求 referrer 字段的值。XMLHttpRequest 没有对应的功能。详见 MDN_Request.referrer
XMLHttpRequest 没有对应的字段。
referrerPolicy
Referer 头如何被设置的策略。设置请求 referrer 字段的值。详见 MDN_Request.referrerPolicy
XMLHttpRequest 没有对应的字段。
integrity
设置请求的 subresource integrity。
XMLHttpRequest 没有对应的字段。
响应
fetch( url, option ).then( function(response){
response.headers
response.ok
response.status
response.statusText
response.redirected
response.type
response.url
response.arrayBuffer()
response.blob()
response.formData()
response.json()
response.text()
} )
response.headers
获取响应的 HTTP 头，XMLHttpRequest 有一个 getAllResponseHeaders 方法可以获取，但是返回的是以 CRLF 分割的字符串，需要自己 parse 成对象格式。
response.ok
表示请求成功，即 statsu 在 200-299 之间。XHLHttpRequest 没有对应的字段。
response.status，response.statusText
XMLHttpRequest 拥有同样的字段可以获取。
response.redirected
此标志位表示请求是否被重定向了。XMLHttpRequest 没有对应的字段。
response.type
表示 response 的类型：
- basic: 常规同域响应。
- cors: 合法的跨域响应。
- error: 网络错误。
- opaque: 用"no-cors"请求去获取跨域资源的响应。
XMLHttpRequest 没有对应的字段。
response.url
响应对应的 url，并且是最终的 url（在重定向后最终的url）。XMLHttpRequest 有一个字段 responseURL 可以对应这个值，但是这个字段是新功能。所以传统的 Ajax 在这方面支持情况还取决于浏览器。
response.arrayBuffer()，response.blob()，response.formData()
Ajax 是否能实现获取这些格式的方法，取决于浏览器是否实现了相关类。
response.json()，response.text()
可以通过 XMLHttpRequest.response 或者 XMLHttpRequest.responseText 获取并 pasrse。
<br />
以上列了 fetch 的主要功能，我们可以看出来，fetch API 提供了对请求更精确的控制。对 cookie，对跨域等功能都有了传统 Ajax（XMLHttpRequest）没有的功能，响应（response）还提供了一些的原来没有的标志位。
写完后在 segmentfault 看到一篇对 XMLHttpRequest 介绍的十分详细的文章，故补充在这里供更深入的学习《你不知道的 XMLHttpRequest》
网友评论