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

• 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》