请求 - Fetch

Posted 2022-01-26 qq3279338858

概念和用法

• 提供了对 Request（请求）和 Response（响应） （以及其他与网络请求有关的）对象的通用定义
• 可以被使用到更多地应用场景中：无论是service workers、Cache API、又或者是其他处理请求和响应的方式，甚至是任何一种需要你自己在程序中生成响应的方式。
• 为有关联性的概念，例如CORS和HTTP原生头信息，提供一种新的定义，取代它们原来那种分离的定义。
• 在Window 和 WorkerGlobalScope接口上实现了这个方法。因此在几乎所有环境中都可以用这个方法获取到资源。
• fetch() 必须接受一个参数——资源的路径。也可以传一个可选的第二个参数init
• 无论请求成功与否，它都返回一个 Promise 对象
• 可以通过 Request() 和 Response() 的构造函数直接创建请求和响应，但是我们不建议这么做。他们应该被用于创建其他 API 的结果（比如，service workers 中的 FetchEvent.respondWith）。

中止 fetch

• 浏览器已经开始为AbortController 和AbortSignal 接口（也就是Abort API）添加实验性支持，允许像 Fetch 和 XHR 这样的操作在还未完成时被中止 。

Fetch

• fetch() 方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。
• Window 和 WorkerGlobalScope 都实现了 WorkerOrGlobalScope。 ——这意味着基本在任何场景下只要你想获取资源，都可以使用 位于 WorkerOrGlobalScope 中的 fetch() 方法。
• 当遇到网络错误时，fetch() 返回的 promise 会被 reject，并传回 TypeError（HTTP 404 状态并不被认为是网络错误。）
• fetch() 方法由 Content Security Policy 的 connect-src指令控制，而不是它请求的资源。
  • Content Security Policy HTTP 响应头允许站点管理者控制用户代理能够为指定的页面加载哪些资源。将帮助防止跨站脚本攻击（Cross-Site Script）（XSS）
  • connect-src 限制能通过脚本接口加载的URL。

语法

Promise<Response> fetch(input[, init]);

参数

• input 定义要获取的资源。这可能是：
  • 一个 USVString 字符串，包含要获取资源的 URL。
    • 除了不允许不成对的代理代码之外， USVString 等同于 DOMString
    • DOMString 是一个UTF-16字符串
  • 一个 Request 对象
• init 一个配置项对象，包括所有对请求的设置。可选的参数有：
  • method: 请求使用的方法，如 GET、POST。
  • headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。
  • body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
    • BufferSource 一个类型，包括ArrayBuffer和ArrayBufferView.
  • mode: 请求的模式，如 cors、 no-cors 或者 same-origin。