api和ajax,fetch API 和 Ajax（XMLHttpRequest）的差异

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 没有对应的字段。

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。

以上列了 fetch 的主要功能，我们可以看出来，fetch API 提供了对请求更精确的控制。对 cookie，对跨域等功能都有了传统 Ajax(XMLHttpRequest)没有的功能，响应(response)还提供了一些的原来没有的标志位。

写完后在 segmentfault 看到一篇对 XMLHttpRequest 介绍的十分详细的文章，故补充在这里供更深入的学习《你不知道的 XMLHttpRequest》