Request 表示客户端（通常是浏览器或应用）向服务器发送的 HTTP 请求，以获取某些资源或服务，它包含了该次请求的所有信息，其本质是一个可读流。

# 使用方式

在使用 fetch 的时候可以直接传入一个 Request 对象，但是我们平常使用都是直接写入 URL。

Request 的构造参数和 fetch API 的参数一样：

1. input：一个字符串，URL 对象或者 Request 对象。
2. init：初始化请求的选项，一个 RequestInit。

ts
const const request: Requestrequest = new var Request: new (input: RequestInfo | URL, init?: RequestInit) => Request
This Fetch API interface represents a resource request.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Request)Request('https://example.com', {
  RequestInit.method?: string | undefined
A string to set request's method.method: 'GET',
})

const const response: Responseresponse = await function fetch(input: string | URL | globalThis.Request, init?: RequestInit): Promise<Response> (+1 overload)
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/fetch)fetch(const request: Requestrequest) // 发送请求

# 属性介绍

以下为 request 对象的属性，但是为只读的。

# method

表示请求的方法类型，默认为 GET。

ts
const request = new Request('https://example.com')
console.log(request.method) // GET

# headers

表示请求的头部信息，格式为键值对，关于它的详细介绍请看Request 和 Response 中的 Headers。

ts
const request = new Request('https://example.com')
console.log(request.headers)

# mode

用于控制请求的模式，特别是在涉及跨域资源访问时。它指定了请求的安全性级别，影响着请求是否能进行、是否包含跨域资源、以及跨域资源访问的限制，默认值为 cors。

ts
const request = new Request('https://example.com')
console.log(request.mode) // same-origin

# body

表示请求体，可以是字符串、Blob、 Buffer、SearchParams、FormData、ReadableStream等。

ts
const request = new Request('https://example.com', {
  method: 'POST',
  body: 'Hello, world!',
})
console.log(request.body)

# bodyUse

表示请求体是否被使用过，只要调用过 json() 或 text() 等方法就会变为 true。

ts
const request = new Request('https://example.com/data', {
  method: 'POST',
  body: 'Hello, world!',
})

request.bodyUse // false

request.text().then((text) => {
  console.log(request.bodyUsed) // true
})

# cache

表示请求的缓存策略，默认为 default。

ts
const request = new Request('https://example.com')
console.log(request.cache) // default

# credentials

用于控制跨域请求时是否发送用户凭据（如 cookies、Authorization headers 或 TLS 客户端证书）。它的值影响浏览器在跨域请求时如何处理凭据，因此在开发需要用户身份验证的 API 或跨域请求时非常重要，默认值为 same-origin。

ts
const request = new Request('https://example.com')
console.log(request.credentials) // same-origin

# referrer

用于指定请求的 Referer（referrer 引荐人，注：因为在定义标准的时候少了一个 r，所以就将错就错）头属性，也就是请求的来源。通过设置 referrer，默认值为 about:client。

ts
const request = new Request('https://example.com')
console.log(request.referrer) // about:client

# referrerPolicy

用于指定请求的 Referrer Policy（这个没有延续之前错误），控制请求发送时是否包含来源 URL，或者选择包含多少级别的来源信息，以保护用户的隐私。默认值为 “”，即采用浏览器默认的策略，大部分浏览器的默认策略是 no-referrer-when-downgrade。

ts
const request = new Request('https://example.com')
console.log(request.referrerPolicy) // ""

# redirect

用于指定当请求遇到重定向（3xx 响应状态码）时该如何处理。它允许开发者控制在发生重定向时请求的行为，提供了不同的选项来决定是否跟随重定向以及如何处理重定向的响应，默认值为 ‘follow’。

ts
const request = new Request('https://example.com')
console.log(request.redirect) // follow

# destination

用于描述请求资源的类型，帮助浏览器优化请求的处理。destination 的值表明了请求的用途（例如脚本、样式、图像等），并且通常和 CORS 相关联——不同类型的资源会触发不同的 CORS 规则。

# integrity

用于指定一个子资源完整性（Sub resource Integrity，简称 SRI）哈希值。它的作用是确保请求的资源未被篡改，并在资源的内容与提供的哈希值匹配时才允许加载，从而提高安全性。

在实际应用中，integrity 通常用于从第三方加载资源（如 CDN 上的 JavaScript 文件），可以有效防止资源在传输过程中被恶意篡改。

# integrity 的工作原理

当指定了 integrity 属性后，浏览器会在资源下载完成后计算资源内容的哈希值，并与 integrity 中提供的哈希值进行比对。如果两者匹配，资源将继续加载；否则，资源加载会被阻止并抛出错误，提升了加载资源的安全性。

ts
const request = new Request('https://example.com/script.js')
// 格式为<hash-algorithm>-<hash-value>
console.log(request.integrity) // sha256-1234567890abcdef

# signal

用于表示请求的取消信号，可以用于中止请求的执行。

ts
const controller = new AbortController()

const request = new Request('https://example.com', {
  signal: controller.signal,
})

console.log(request.signal.aborted) // false
controller.abort('请求已中断') // 中止请求

# url

用于描述请求的 URL，通常用于构建完整的请求地址。

ts
const request = new Request('https://example.com')
console.log(request.url) // https://example.com

# isHistoryNavigation

用于判断当前请求是否由浏览器的前进或后退按钮触发。这个属性有助于开发者识别用户导航行为是否来自浏览器的历史记录导航。

ts
const request = new Request('https://example.com')
console.log(request.isHistoryNavigation) // false

# keepalive

用于指示请求是否应该在页面卸载（例如关闭、刷新或导航到其他页面）时仍然保持活动状态。它主要用于发送需要在页面关闭时完成的关键请求（如日志、统计数据或用户行为数据的记录）。

ts
const request = new Request('https://example.com')
console.log(request.keepalive) // false

# targetAddressSpace

用于指定目标请求的地址空间（Address Space）。它帮助浏览器识别请求的安全性，以防止潜在的跨地址空间泄露问题。这个属性是提升网络请求安全性的一部分，主要与**私有网络访问（Private Network Access, PNA）**相关。

ts
const request = new Request('https://example.com')
console.log(request.targetAddressSpace) // unknown

# RequestInit 介绍

具体的一些属性值和上面出现的一样，就不详细说明了。

这个接口用于描述请求的初始化选项，包括请求方法、请求头、请求体等。它由以下属性组成：

• method：请求方法，默认为 GET。
• headers：请求头。
• body：请求体。
• mode：请求模式。默认为 cors。
• credentials：请求凭证。默认为 same-origin。
• cache：请求缓存策略。默认为 default。
• redirect:：求重定向策略。默认为 follow。
• referrer：请求来源。默认为 about:client。
• referrerPolicy：请求来源策略。默认为 no-referrer-when-downgrade。
• integrity：请求完整性。默认为 “”。
• keepalive：是否保持活动状态。默认为 false。
• signal：请求取消信号。
• priority：请求优先级，默认为 auto，还可以是 low，high。
• window：请求窗口。

# 示例

ts
const const requestInit: RequestInitrequestInit: RequestInit = {
  RequestInit.method?: string | undefined
A string to set request's method.method: 'POST',
  RequestInit.headers?: HeadersInit | undefined
A Headers object, an object literal, or an array of two-item arrays to set request's headers.headers: {
    'Content-Type': 'application/json',
  },
  RequestInit.body?: BodyInit | null | undefined
A BodyInit object or null to set request's body.body: var JSON: JSON
An intrinsic object that provides functions to convert JavaScript values to and from the JavaScript Object Notation (JSON) format.JSON.JSON.stringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string (+1 overload)
Converts a JavaScript value to a JavaScript Object Notation (JSON) string.
@paramvalue A JavaScript value, usually an object or array, to be converted.@paramreplacer A function that transforms the results.@paramspace Adds indentation, white space, and line break characters to the return-value JSON text to make it easier to read.stringify({ name: stringname: 'John', age: numberage: 30 }),
  RequestInit.mode?: RequestMode | undefined
A string to indicate whether the request will use CORS, or will be restricted to same-origin URLs. Sets request's mode.mode: 'cors',
  RequestInit.credentials?: RequestCredentials | undefined
A string indicating whether credentials will be sent with the request always, never, or only when sent to a same-origin URL. Sets request's credentials.credentials: 'same-origin',
  RequestInit.cache?: RequestCache | undefined
A string indicating how the request will interact with the browser's cache to set request's cache.cache: 'default',
  RequestInit.redirect?: RequestRedirect | undefined
A string indicating whether request follows redirects, results in an error upon encountering a redirect, or returns the redirect (in an opaque fashion). Sets request's redirect.redirect: 'follow',
  RequestInit.referrer?: string | undefined
A string whose value is a same-origin URL, "about:client", or the empty string, to set request's referrer.referrer: 'about:client',
  RequestInit.referrerPolicy?: ReferrerPolicy | undefined
A referrer policy to set request's referrerPolicy.referrerPolicy: 'no-referrer-when-downgrade',
  RequestInit.integrity?: string | undefined
A cryptographic hash of the resource to be fetched by request. Sets request's integrity.integrity: 'sha256-1234567890abcdef',
  RequestInit.keepalive?: boolean | undefined
A boolean to set request's keepalive.keepalive: false,
  RequestInit.signal?: AbortSignal | null | undefined
An AbortSignal to set request's signal.signal: new var AbortController: new () => AbortController
A controller object that allows you to abort one or more DOM requests as and when desired.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/AbortController)


A controller object that allows you to abort one or more DOM requests as and when desired.AbortController().AbortController.signal: AbortSignal
Returns the AbortSignal object associated with this object.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/AbortController/signal)


Returns the AbortSignal object associated with this object.signal,
  RequestInit.priority?: RequestPriority | undefinedpriority: 'high',
  RequestInit.window?: null | undefined
Can only be null. Used to disassociate request from any Window.window: null,
}

attributionReporting 和 browsingTopics 是相对较新的 RequestInit 属性，它们用于支持浏览器中隐私保护的广告技术，是 隐私沙盒（Privacy Sandbox） 的一部分。这些属性目前仍在发展中，支持范围和具体实现可能随时间和浏览器版本而变化。目前只有 Chrome 和 Edge 支持这两个属性。

# attributionReporting

用于支持隐私保护的广告归因报告（Attribution Reporting API）。其目的是在保护用户隐私的前提下，将广告点击与后续的转化（如购买或注册）进行关联，而无需依赖第三方 Cookie。

# 主要用途

用于广告效果归因分析，例如： 用户点击广告后购买产品。 广告发布商希望知道广告的效果，但不希望直接泄露用户数据。

ts
fetch('/conversion-endpoint', {
  method: 'POST',
  attributionReporting: {
    sourceEventId: '12345', // 广告点击事件 ID
    destination: 'https://advertiser.com', // 转化目标
  },
})

# browsingTopics

用于支持 Topics API。Topics API 是隐私沙盒的一部分，用于基于用户的兴趣进行广告投放，而无需追踪用户的具体行为。

# 主要用途

提供用户的兴趣话题：通过最近访问的站点推断用户的兴趣，广告商可根据这些兴趣投放相关广告。例如：用户可能被识别为对 “科技” 或 “运动” 感兴趣。

ts
fetch('/ad-delivery-endpoint', {
  method: 'GET',
  browsingTopics: {
    topics: ['technology', 'fitness'], // 用户感兴趣的话题
  },
})