Ajax 之战：XMLHttpRequest 与 Fetch API( 二 ) _Ajax

Headers 对象提供了一个简单的接口来设置请求中的头信息或获取响应中的头信息：
// set request headersconst headers = new Headers();headers.set("X-Requested-With", "ajax");headers.Append("Content-Type", "text/xml");const request = new Request("/service", {method: "POST",headers,});const res = await fetch(request);// examine response headersconsole.log(res.headers.get("Content-Type"));缓存控制
在 XMLHttpRequest 中管理缓存具有挑战性，你可能会发现有必要附加一个随机查询字符串值来绕过浏览器缓存，Fetch 方法在第二个参数 init 对象中内置了对缓存的支持：
const res = await fetch("/service", {method: "GET",cache: "default",});缓存可以设置为：

'default' —— 如果有一个新的 (未过期的) 匹配，则使用浏览器缓存；如果没有，浏览器会发出一个带条件的请求来检查资源是否已改变，并在必要时会发出新的请求
'no-store' —— 绕过浏览器缓存，并且网络响应不会更新它
'reload' —— 绕过浏览器缓存，但是网络响应会更新它
'no-cache' —— 类似于'default'，除了一个条件请求总是被做
'force-cache' —— 如果可能，使用缓存的版本，即使它过时了
'only-if-cached' —— 相同的 force-cache，除了没有网络请求

跨域控制
跨域共享资源允许客户端脚本向另一个域发出 Ajax 请求，前提是该服务器允许
Access-Control-Allow-Origin 响应头中的源域；如果没有设置这个参数，fetch() 和 XMLHttpRequest 都会失败。但是，Fetch 提供了一个模式属性，可以在第二个参数的 init 对象中设置‘no-cors’属性。
const res = await fetch('https://anotherdomain.com/service',{method: 'GET',mode: 'no-cors'});这将返回一个不能读取但可以被其它的 API 使用的响应。例如，你可以使用 Cache API 存储返回再之后使用，可能从 Service Worker 返回一个图像、脚本或 css 文件。
凭证控制
XMLHttpRequest 总是发送浏览器 cookie，Fetch API 不会发送 cookie，除非你显式地在第二个参数 init 对象中设置 credentials 属性。
const res = await fetch("/service", {method: "GET",credentials: "same-origin",});credentials 可以设置为：

'omit' —— 排除 cookie 和 HTTP 认证项 (默认)
'same-origin' —— 包含对同源 url 的请求的凭证
'include' —— 包含所有请求的凭证

请注意，include 是早期 API 实现中的默认值，如果你的用户可能运行旧的浏览器，就得显式地设置 credentials 属性。
重定向控制
默认情况下，fetch() 和 XMLHttpRequest 都遵循服务器重定向。但是，fetch() 在第二个参数 init 对象中提供了替代选项：
const res = await fetch("/service", {method: "GET",redirect: "follow",});redirect 可以设置为：

'follow' —— 遵循所有重定向（默认）
'error' —— 发生重定向时中止（拒绝）
'manual' —— 返回手动处理的响应

数据流
XMLHttpRequest 将整个响应读入内存缓冲区，但是 fetch() 可以流式传输请求和响应数据，这是一项新技术，流允许你在发送或接收时处理更小的数据块。例如，你可以在完全下载前处理数兆字节文件中的信息，下面的示例将传入的（二进制）数据块转换为文本，并将其输出到控制台。在较慢的连接上，你会看到更小的数据块在较长的时间内到达。

const response = await fetch("/service"),reader = response.body.pipeThrough(new TextDecoderStream()).getReader();while (true) {const { value, done } = await reader.read();if (done) break;console.log(value);}

【Ajax 之战：XMLHttpRequest 与 Fetch API】服务器端支持
Deno 和 Node 18 中完全支持 Fetch，在服务器和客户端使用相同的 API 有助于减少认知成本，还提供了在任何地方运行的同构 JavaScript 库的可能性。
第二轮：XMLHttpRequest 获胜
尽管存在缺陷，XMLHttpRequest 还是有一些技巧可以超越 ajax Fetch() 。
进度支持
我们可以监控请求的进度，通过将一个处理程序附加到 XMLHttpRequest 对象的进度事件上。这在上传大文件（如照片）时特别有用：