较系统整理了下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')
})
