跳到主要内容

Request

2023年03月24日
柏拉文
越努力，越幸运

一、认识​

Fetch API 的 Request接口, 用来表示资源请求。

二、构造函数​

2.1 Request()​

Request() 构造器创建一个新的Request 对象。

语法

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

  • input: 定义要获取的资源

  • init: 一个配置项对象，包括所有对请求的设置

三、实例属性​

3.1 body​

body

3.2 bodyUsed​

bodyUsed 是一个布尔值，表示请求体是否已经被读取。

3.3 cache​

cache 包含着请求的缓存模式。它控制着请求以何种方式与浏览器的 HTTP 缓存进行交互。

语法

var currentCacheMode = request.cache;

返回

  • default: 浏览器从 HTTP 缓存中寻找匹配的请求

    • 如果缓存匹配上并且有效（ fresh）, 它将直接从缓存中返回资源。

    • 如果缓存匹配上但已经过期，浏览器将会使用传统（ conditional request ）的请求方式去访问远程服务器。如果服务器端显示资源没有改动，它将从缓存中返回资源。否则，如果服务器显示资源变动，那么重新从服务器下载资源更新缓存。

    • 如果缓存没有匹配，浏览器将会以普通方式请求，并且更新已经下载的资源缓存。

  • no-store: 浏览器直接从远程服务器获取资源，不查看缓存，并且不会使用下载的资源更新缓存。

  • reload: 浏览器直接从远程服务器获取资源，不查看缓存，然后使用下载的资源更新缓存。

  • no-cache: 浏览器在其 HTTP 缓存中寻找匹配的请求

    • 如果有匹配，无论是新的还是陈旧的，浏览器都会向远程服务器发出条件请求。如果服务器指示资源没有更改，则将从缓存中返回该资源。否则，将从服务器下载资源并更新缓存。

    • 如果没有匹配，浏览器将发出正常请求，并使用下载的资源更新缓存。

  • force-cache: 浏览器在其 HTTP 缓存中寻找匹配的请求

    • 如果有匹配项，不管是新匹配项还是旧匹配项，都将从缓存中返回。

    • 如果没有匹配，浏览器将发出正常请求，并使用下载的资源更新缓存。

  • only-if-cached: 浏览器在其 HTTP 缓存中寻找匹配的请求

    • 如果有匹配项 (新的或旧的)，则从缓存中返回。

    • 如果没有匹配，浏览器将返回一个错误。

3.4 credentials​

credentials 用于表示用户代理是否应该在跨域请求的情况下从其他域发送 cookies。这与 XHR 的 withCredentials 标志相似,不同的是有三个可选值（后者是两个）:

  • omit: 从不发送 cookies.

  • same-origin: 只有当 URL 与响应脚本同源才发送 cookies、HTTP Basic authentication 等验证信息.(浏览器默认值，在旧版本浏览器，例如 safari 11 依旧是 omit，safari 12 已更改)

  • include: 不论是不是跨域的请求，总是发送请求资源域在本地的 cookies、HTTP Basic authentication 等验证信息。

语法

var myCred = request.credentials;

3.5 destination​

destination 只读属性 headers 包含与当前请求关联的Headers对象

语法

var myHeaders = request.headers;

返回

一个 Headers 对象。

3.6 headers​

headers

3.7 integrity​

integrity

3.8 method​

method 只读属性method包含请求的方法 (GET, POST, etc.)

语法

var myMethod = request.method;

3.9 mode​

mode 只读属性包含请求的模式（例如：cors 、 no-cors 、 cors-with-forced-preflight 、 same-origin 或 navigate 。）这用于确定跨域请求是否能得到有效的响应，以及响应的哪些属性是可读的。

语法

var myMode = request.mode;

返回

一个 RequestMode 值。

  • same-origin: 如果使用此模式向另外一个源发送请求，显而易见，结果会是一个错误。你可以设置该模式以确保请求总是向当前的源发起的。

  • no-cors: 保证请求对应的 method 只有 HEAD，GET 或 POST 方法，并且请求的 headers 只能有简单请求头 (simple headers)。如果 ServiceWorker 劫持了此类请求，除了 simple header 之外，不能添加或修改其他 header。另外 JavaScript 不会读取 Response 的任何属性。这样将会确保 ServiceWorker 不会影响 Web 语义 (semantics of the Web)，同时保证了在跨域时不会发生安全和隐私泄露的问题。

  • cors: 允许跨域请求，例如访问第三方供应商提供的各种 API。预期将会遵守 CORS protocol 。仅有有限部分的头部暴露在 Response ，但是 body 部分是可读的。

  • navigate: 表示这是一个浏览器的页面切换请求 (request)。navigate 请求仅在浏览器切换页面时创建，该请求应该返回 HTML。

3.10 redirect​

redirect

3.11 referrer​

referrer

3.12 referrerPolicy​

referrerPolicy

3.13 signal​

signal

3.14 url​

url

四、实例方法​

4.1 arrayBuffer()​

arrayBuffer() 读取请求体并将其作为一个 promise 返回，该 promise 将兑现一个 ArrayBuffer。

语法

arrayBuffer()

返回值

一个 promise，会兑现一个 ArrayBuffer。

4.2 blob()​

blob() 读取请求体并将其作为 promise 返回，该 promise 将兑现一个 Blob。

语法

blob()

返回值

一个 promise，会兑现一个Blob。

4.3 clone()​

clone() 可以创建一个当前 Request 对象的副本

语法

var newRequest = request.clone();

返回值

Request 对象，也就是 Request 的完整拷贝

4.4 formData()​

formData() 读取请求体并将其作为 promise 返回，该 promise 将兑现一个 FormData 对象。

语法

formData()

返回值

一个 Promise，会兑现一个 FormData 对象。

4.5 json()​

json() 读取请求体并将其作为一个 promise 返回，该 promise 将兑现一个由响应体的文本解析得到的 JSON。

语法

json()

返回值

一个将兑现一个 JavaScript 对象的 Promise。这个对象可能是任何可以用 JSON 表示的东西——一个对象、一个数组、一个字符串、一个数值……

4.6 text()​

text() 读取请求体并且将其作为一个 promise 返回，该 promise 将兑现一个 String。响应总是使用 UTF-8 解码。

语法

text()

返回值

一个 promise，会兑现一个 String。