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》