Fetch

较系统整理了下Fetch和Ajax：

Fetch和Ajax的区别：

Fetch	Ajax
fetch基于Promise，不使用回调函数	基于回调，回调嵌套，回调地狱
采用模块化设计，API分散在Request、Response、Headers对象上，使之可以应用到更多场景中，比如 service worker	输入、输出、状态都集中在一个API上，容易混乱
通过数据流处理，可以分块读取，有利于提高网站性能，减少内存占用，对于请求大文件或网速慢的场景很有用	不支持数据流，所有的数据必须放在缓存里；不支持分块读取，必须等全部拿到后一次性输出

Response对象

Fetch发出请求后，无论请求成功与否，都会返回一个Promise实例，并resolve一个response对象。

Response 包含的数据通过Stream异步获取，还包含其他同步属性，对应HTTP响应信息，可以立即读取。

同步属性：

属性	描述	类型
Response.ok	请求是否成功	bool
Response.status	状态码	number
Response.statusText	原因短语（状态信息描述）	string
Response.url	请求url	string
Response.type	请求的类型，比如 basic、cors等	string
Response.redirected	response是否来自重定向	bool
Response.bodyUsed	response是否读取过body	bool
Response.headers	HTTP请求和响应头信息	Headers实例

判断请求是否成功

fetch发出请求后，只有网络错误或者无法连接才报错。而无论请求成功与否，都返回一个 Promise 对象，并resolve 对应请求的Response。也就是说即使状态码是4xx或5xx，fetch都不会报错。

所以只用通过resonse对象的status属性得到状态码去判断成请求成功与否。或者通过response.ok是否为true判断。

Response.headers属性

headers实例通过 new Headers() 创建。实例方法包括：

方法	描述	返回值
Headers.get()	获取指定头的全部信息	string
Headers.has()	判断是否包含该http头	bool
Headers.set()	设置头信息	void
Headers.delete()	删除指定头信息	-
Headers.append()	给现有header添加一个值, 或添加一个未存在的header并赋值	-
Headers.keys()	所有key
Headers.values()	所有值
Headers.entries()	key-value对
Headers.forEach()	遍历器

因为headers具有Symbol(Symbol.iterator)属性，所以也可以通过for...of遍历。

读取内容的5个异步方法

方法	返回值
response.text()	文本字符
response.json()	JSON对象
response.blob()	二进制Blob对象
response.formData()	FormData对象（主要用在Service Worker，拦截用户提交的表单，修改某些数据后再提交服务器）
response.arrayBuffer()	二进制 ArrayBuffer 对象（主要获取流媒体文件）

Response.clone()

以上5个方法同时只能使用一个，因为Stream对象只能读一次，读完就没了。可以使用clone方法可以克隆一个response。

const response1 = await fetch('flowers.jpg')
const response2 = response1.clone()

const blob1 = await response1.blob()
const blob2 = await response2.blob()

image1.src = URL.createObjectURL(blob1)
image2.src = URL.createObjectURL(blob2)

Response.body

body属性是response暴露body内容的 ReadableStream 对象。可以分块读取内容。

fetch第二个参数

第二个参数是一个配置对象。包括请求头，请求方式，数据体等。

事实上fetch() 底层是通过url和配置对象创建一个Request的实例。

 new Request(input[, init])

input为url或request对象。

init属性

属性	描述	值
method	请求方式	GET/POST/HEAD等
headers	请求头	Headers的实例
body	POST请求方式的请求体
mode	请求模式	cors：默认值，允许跨域；same-origin：只允许同源；no-cors：跨域只限于简单请求
credentials	是否发送 cookie	same-origin：默认值，同源发送，跨域不发送；omit：不发送；includes：无论同源还是跨域都发送
keep-alive	页面卸载时，告诉浏览器在后台保持连接，继续发送数据	bool
redirect	对重定向的处理模式	follow：默认值，fetch 跟随 http 跳转；error：如果跳转，则 fetch 报错；manual：fetch 不跟随 http 跳转，当时 response.url 指向新的 url，且 response.redirected 为 true
cache	请求以什么方式和浏览器得 HTTP 缓存交互	default：默认值，优先从缓存查找匹配得；no-store：直接请求服务器；no-cache：协商缓存；forch-cache：优先查找缓存（无论新旧），没有再请求服务器；only-if-cache：优先查找缓存（无论新旧），没有则报错；reload：直接请求服务器，并更新缓存
signal	取消请求	AbortSignal 实例

GET和HEAD请求时没有body。

POST请求时，body数据类型要和headers中的Content-type一致。具体：

Content-type	body	类型
application/x-www-form-urlencode	key1=val1&key2=val2	string
application/json	JSON.stringify(data)	string
multipart/form-data; boundary=xxxxx	FormData实例	obj

FormData、文件上传、二进制数据（Blob、Arraybuffer）不需要修改Content-Type

中止Fetch

AbortController

实验中的API，用于中止fetch请求。

示例：

const controller = new AbortController()
const signal = controller.signal
const downloadBtn = document.querySelector('.download')
const abortBtn = document.querySelector('.abort')

downloadBtn.addEventListener('click', function() {
 fetch(url, {
  signal
 })
 .then(response => {
  //...
 })
 .catch(e => {
  reports.textContent = 'Download error: ' + e.message
 })
})
abortBtn.addEventListener('click', function() {
 controller.abort() // 取消
 console.log('Download aborted')
})