recursal/MDN huggingface dataset:
ServiceWorker
=============

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

Service Worker API 的 **`ServiceWorker`** 接口提供了对 service worker 的引用。各个浏览上下文（例如页面、worker 等）可以与相同的 service worker 相关联，每个浏览上下文都可以通过唯一的 `ServiceWorker` 对象访问。

在 `ServiceWorkerRegistration.active` (en-US) 属性和 `ServiceWorkerContainer.controller` 属性中有一个 `ServiceWorker` 对象——这是一个已激活并在控制页面的 service worker（service worker 成功注册，被控页面已经重新加载）。

`ServiceWorker` 接口被分配了一系列生命周期事件——`install` 和 `activate`——以及功能型的事件，包括 `fetch`。一个 ServiceWorker 对象有一个与之关联的 `ServiceWorker.state`，指示着它的生命周期。

EventTarget

ServiceWorker实例属性
----

*ServiceWorker 接口继承其父类 `EventTarget` 的属性。*

`ServiceWorker.scriptURL` 只读 

返回作为 `ServiceWorkerRegistration` (en-US) 一部分所定义的 ServiceWorker 序列化脚本 URL。这个 URL 必须和注册该 `ServiceWorker` 的文档处于同一域。

`ServiceWorker.state` 只读 

返回 service worker 的状态。其值可能是如下之一：`installing`、`installed`、`activating`、`activated` 或 `redundant`。

实例方法
----

*ServiceWorker 接口继承其父类 `EventTarget` 的方法。*

### 事件

`ServiceWorker.onstatechange` 只读 

每当 `ServiceWorker.state` 发生改变时，都会触发。

示例
--

代码段来自 service worker registration-events sample（在线演示）。这段代码监听了 `ServiceWorker.state` 的变化并且返回它的值。


```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("service-worker.js", {
      scope: "./",
    })
    .then((registration) => {
      let serviceWorker;
      if (registration.installing) {
        serviceWorker = registration.installing;
        document.querySelector("#kind").textContent = "installing";
      } else if (registration.waiting) {
        serviceWorker = registration.waiting;
        document.querySelector("#kind").textContent = "waiting";
      } else if (registration.active) {
        serviceWorker = registration.active;
        document.querySelector("#kind").textContent = "active";
      }
      if (serviceWorker) {
        // logState(serviceWorker.state);
        serviceWorker.addEventListener("statechange", (e) => {
          // logState(e.target.state);
        });
      }
    })
    .catch((error) => {
      // Something went wrong during registration. The service-worker.js file
      // might be unavailable or contain a syntax error.
    });
} else {
  // The current browser doesn't support service workers.
  // Perhaps it is too old or we are not in a Secure Context.
}
```

规范
--

| Specification |
| --- |
| Service Workers # serviceworker-interface |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Service Worker
* Service worker 基本代码示例
* 是否支持 ServiceWorker
* `Promise`
* 使用 web worker
HTMLVideoElement
================

**`HTMLVideoElement`** 接口提供了用于操作视频对象的特殊属性和方法。它同时还继承了`HTMLMediaElement` 和 `HTMLElement` 的属性与方法。

在不同浏览器中 支持的媒体格式 (en-US) 是不一样的。因此在提供媒体文件的时候，或者提供一种所有浏览器都支持的格式，或者提供格式不同的多个视频源来支持不同浏览器，保证你想要支持的浏览器都能够播放。

属性
--

*继承了其父对象 `HTMLMediaElement` 和 `HTMLElement` 的属性。*

`HTMLVideoElement.height` (en-US)

表达 HTML 属性 `height`的值的一个`DOMString` ，以 CSS pixels 的单位给出了显示区域的大小。

`HTMLVideoElement.poster`

表达 HTML 属性 `poster`的值的一个`DOMString` ，用于指定当视频无法播放时需要展示的图片。

`HTMLVideoElement.videoHeight` 只读 

返回一个`unsigned long` 值，以 CSS pixels 的单位给出视频资源的实际高度。这个值考虑了大小、对比度、明度、分辨率等，是由视频资源本身确定的。如果这个元素的 ready state 是 `HAVE_NOTHING`，这个属性的值为 0。

`HTMLVideoElement.videoWidth` 只读 

返回一个`unsigned long` 值，以 CSS pixels 的单位给出视频资源的实际宽度。这个值考虑了大小、对比度、明度、分辨率等，是由视频资源本身确定的。如果这个元素的 ready state 是 `HAVE_NOTHING`，这个属性的值为 0。

`HTMLVideoElement.width` (en-US)

表达 HTML 属性 `width`的值的一个`DOMString` ，以 CSS pixels 的单位给出了显示区域的大小。

### Gecko 特定属性

`HTMLVideoElement.mozParsedFrames` 只读 
非标准

返回一个 `unsigned long` 值，给出已经从媒体资源中解析的视频帧数。

`HTMLVideoElement.mozDecodedFrames` 只读 
非标准

返回一个 `unsigned long` 值，给出已经从媒体资源中解析，并解码为图像的视频帧数。

`HTMLVideoElement.mozPresentedFrames` 只读 
非标准

返回一个 `unsigned long` 值，给出被置入绘制队列 (pipeline) 等待绘制的视频帧数。

`HTMLVideoElement.mozPaintedFrames` 只读 
非标准

返回一个 `unsigned long` 值，给出已经被绘制的视频帧数。

`HTMLVideoElement.mozFrameDelay` 只读 
非标准

返回一个 `double` 值，表示到目前为止，距上一次绘制过去了多长时间，单位是秒。

`HTMLVideoElement.mozHasAudio` 只读 
非标准

返回一个`Boolean` (en-US)值，表示这个视频是否有关联音频。

方法
--

*继承了其父对象* *`HTMLMediaElement`和* *`HTMLElement`的方法。*

`HTMLVideoElement.getVideoPlaybackQuality()` (en-US) 
实验性

返回一个 `VideoPlaybackQuality` 对象，包含了对当前播放引擎的量度信息。

规范
--

| Specification |
| --- |
| HTML Standard # htmlvideoelement |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

另见
--

* HTML element implementing this interface: `<video>`.
* Demo of video paint statistics
* Supported media formats (en-US)
indexedDB
=========

**`indexedDB`** 是 `WindowOrWorkerGlobalScope` 的一个只读属性，它集成了为应用程序提供异步访问索引数据库的功能的机制。.

语法
--
```

var IDBFactory = self.indexedDB;
```

值
-

一个 `IDBFactory` 对象。

示例


```js
var db;
function openDB() {
  var DBOpenRequest = window.indexedDB.open("toDoList");
  DBOpenRequest.onsuccess = function (e) {
    db = DBOpenRequest.result;
  };
}
```

规范
--

| Specification |
| --- |
| Indexed Database API 3.0 # dom-windoworworkerglobalscope-indexeddb |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (view example live.)
WebGLBuffer
===========

**WebGLBuffer** 接口属于 WebGL API 的一部分，表示一个不透明的缓冲区对象，储存诸如顶点或着色之类的数据。

描述
--

`WebGLBuffer` 对象没有定义任何自己的方法或属性，且内容不能被直接访问。当使用 `WebGLBuffer` 对象时， `WebGLRenderingContext` 下的这些方法会很有用：

* `WebGLRenderingContext.bindBuffer()`
* `WebGLRenderingContext.createBuffer()`
* `WebGLRenderingContext.deleteBuffer()`
* `WebGLRenderingContext.isBuffer()`
示例
--

### 创建一个缓冲区


```js
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
var buffer = gl.createBuffer();
```

规范
--

| Specification |
| --- |
| WebGL Specification # 5.4 |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `WebGLRenderingContext.bindBuffer()`
* `WebGLRenderingContext.createBuffer()`
* `WebGLRenderingContext.deleteBuffer()`
* `WebGLRenderingContext.isBuffer()`
* 其他缓冲区： `WebGLFramebuffer`, `WebGLRenderbuffer`
HTMLBaseElement
===============

**`HTMLBaseElement`** 接口包含一份 HTML 文件的基础 URI 设定，该对象继承了所有 `HTMLElement` 接口中定义的方法与属性。

属性
--

*继承了其父级 `HTMLElement` 的所有属性。*

`HTMLBaseElement.href`

映射自 `DOMString` HTML `href` 特性，包含了当前文档中所有相对 URL 地址的基准 URL。

`HTMLBaseElement.target` (en-US)

Is a `DOMString` that reflects the `target` HTML attribute, containing a default target browsing context or frame for elements that do not have a target reference specified.

方法
--

*没有特殊的方法，继承了其父级 `HTMLElement` 的所有特性。*

规范
--

| Specification |
| --- |
| HTML Standard # htmlbaseelement |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 实现了该接口的 HTML 元素：`<base>`
WebGLTexture
============

**WebGLTexture**接口是WebGL API的一部分，为不透明的纹理对象提供储存和状态等纹理操作。

描述
--

`WebGLTexture`对象自身未定义任何属性或方法，其内容无法被直接访问。当使用`WebGLTexture`对象时， `WebGLRenderingContext` 里的这些方法会很有用：

* `WebGLRenderingContext.bindTexture()`
* `WebGLRenderingContext.createTexture()`
* `WebGLRenderingContext.deleteTexture()`
* `WebGLRenderingContext.isTexture()` (en-US)
例子
--

### 创建一个纹理


```js
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
var texture = gl.createTexture();
```

规范
--

| Specification |
| --- |
| WebGL Specification # 5.9 |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.bindTexture()`
* `WebGLRenderingContext.createTexture()`
* `WebGLRenderingContext.deleteTexture()`
* `WebGLRenderingContext.isTexture()` (en-US)
* `WebGLRenderingContext.compressedTexImage2D()` (en-US)
* `WebGLRenderingContext.compressedTexSubImage2D()` (en-US)
* `WebGLRenderingContext.copyTexImage2D()` (en-US)
* `WebGLRenderingContext.copyTexSubImage2D()` (en-US)
* `WebGLRenderingContext.generateMipmap()` (en-US)
* `WebGLRenderingContext.getTexParameter()`
* `WebGLRenderingContext.texImage2D()`
* `WebGLRenderingContext.texSubImage2D()` (en-US)
* `WebGLRenderingContext.texParameterf()` (en-US)
* `WebGLRenderingContext.texParameteri()` (en-US)
Clipboard
=========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

**`Clipboard`** 接口实现了 Clipboard API，如果用户授予了相应的权限，其就能提供系统剪贴板的读写访问能力。在 Web 应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能。

EventTarget

Clipboard
系统剪贴板暴露于全局属性 `Navigator.clipboard` 之中。

如果用户没有适时使用 Permissions API (en-US) 授予 `"clipboard-read"` 或 `"clipboard-write"` 权限，调用 `Clipboard` 对象的方法不会成功。

**备注：** 实际上，现在浏览器对于访问剪贴板权限的索取各有不同，在章节的 剪贴板可用性 部分查看更多细节。

所有 Clipboard API 的方法都是异步的；它们返回一个 `Promise` 对象，在剪贴板访问完成后被兑现。如果剪贴板访问被拒绝，promise 也会被拒绝。

**备注：** **剪贴板**是用于短期数据储存或转移的数据缓存区，数据转移可以发生在文档和应用程序之间。剪贴板常常实现为一个匿名的、临时的 数据缓存，有时也叫做粘贴缓存，可由绝大部分位于已定义 应用程序接口 的环境中的程序访问。

一个典型的应用程序常通过将 用户输入（如：快捷键、菜单选择 等）映射到一些需要访问剪贴板的功能接口上。

方法
--

*`Clipboard` 继承自 `EventTarget` 接口，因此拥有它的方法。*

`read()` (en-US)

从剪贴板读取数据（比如图片），返回一个 `Promise` 对象。在检索到数据后，promise 将兑现一个 `ClipboardItem` (en-US) 对象的数组来提供剪切板数据。

`readText()`

从操作系统读取文本；返回一个 `Promise`，在从剪切板中检索到文本后，promise 将兑现一个包含剪切板文本数据的 `DOMString`。

`write()`

写入任意数据至操作系统剪贴板。这是一个异步操作，在操作完成后，返回的 promise 的将被兑现。

`writeText()`

写入文本至操作系统剪贴板。返回一个 `Promise`，在文本被完全写入剪切板后，返回的 promise 将被兑现。

剪贴板可用性
------

异步剪贴板 API 是一个相对较新的 API，浏览器仍在逐步实现它。由于潜在的安全问题和技术复杂性，大多数浏览器都未完全实现这个 API。

例如，Firefox 不支持 `"clipboard-read"` 和 `"clipboard-write"` 权限，所以使用其他方式访问或改变剪贴板中的内容会受限。

对于浏览器扩展来说，你可以请求 clipboardRead 和 clipboardWrite 权限以使用 clipboard.readText() 和 clipboard.writeText()。但基于 HTTP 的网站中包含的脚本则不能访问剪贴板对象。参见 extensions in Firefox 63。

除此之外，`read()` (en-US) 以及 `write()` 是默认禁用且需要修改偏好设置来启用的。在使用之前请先查看浏览器兼容性表。

规范
--

| Specification |
| --- |
| Clipboard API and events # clipboard-interface |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Document.execCommand()`
Request.mode
============

`Request` 接口的 **`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。

#### 默认模式

可以以多种方式发起请求，并且请求的模式取决于发起请求的特定方式。

例如，当一个 `Request` 对象以 `Request.Request` 方式创建，该`Request` 的 `mode` 的值为 `cors` 。

然而，除了以 `Request.Request` 创建的请求，模式通常为 `no-cors` 。例如，对与嵌入资源发起的请求，除非存在 `crossorigin` 属性，即对于 `<link>` 、 `<script>`（除了和模块一起使用之外）、 `<img>`、 `<audio>`、 `<video>`、 `<object>`、 `<embed>`还有 `<iframe>` 元素，在大多数情况下是使用 `no-cors` 模式。

示例
--

在下面代码段中，我们使用 `Request.Request()` 创建请求（请求与脚本位于同一目录中的图像文件），然后将请求模式保存在一个变量中：

In the following snippet, we create a new request using theconstructor (for an image file in the same directory as the script), then save the request mode in a variable:


```js
var myRequest = new Request("flowers.jpg");
var myMode = myRequest.mode; // returns "cors" by default
```

规范
--

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-mode② |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* ServiceWorker API (en-US)
* HTTP 访问控制（CORS）
* HTTP
Request.blob()
==============

`Request` 接口的 **`blob()`** 方法读取请求体并将其作为 promise 返回，该 promise 将兑现一个 `Blob`。

语法
--


```js
blob()
```

### 参数

无。

### 返回值

一个 promise，会兑现一个 `Blob`。

示例
--


```js
const obj = { hello: "world" };
const myBlob = new Blob([JSON.stringify(obj, null, 2)], {
  type: "application/json",
});

const request = new Request("/myEndpoint", {
  method: "POST",
  body: myBlob,
});

request.blob().then(function (myBlob) {
  // do something with the blob sent in the request
});
```

规范
--

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-blob① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Response.blob()`
Request.credentials
===================

**`credentials`** 是`Request`接口的只读属性，用于表示用户代理是否应该在跨域请求的情况下从其他域发送 cookies。这与 XHR 的 withCredentials 标志相似，不同的是有三个可选值（后者是两个）：

* `omit`: 从不发送 cookies.
* `same-origin`: 只有当 URL 与响应脚本同源才发送 cookies、HTTP Basic authentication 等验证信息.(浏览器默认值，在旧版本浏览器，例如 safari 11 依旧是 omit，safari 12 已更改)
* `include`: 不论是不是跨域的请求，总是发送请求资源域在本地的 cookies、HTTP Basic authentication 等验证信息。
语法
--


```js
var myCred = request.credentials;
```

### Value

A `RequestCredentials` value.

举例
--

在以下代码中，我们使用`Request.Request()`创建了一个新的 request（为了一个与脚本在同一目录下的图片文件），接着将 request credentials 存入一个变量：


```js
var myRequest = new Request("flowers.jpg");
var myCred = myRequest.credentials; // returns "same-origin" by default
```

规范
--

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-credentials② |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ServiceWorker API (en-US)
* HTTP access control (CORS)
* HTTP
Request.text()
==============

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

语法
--


```js
text()
```

### 参数

无。

### 返回值

一个 promise，会兑现一个 `String`。

示例
--


```js
const text = "Hello world";

const request = new Request("/myEndpoint", {
  method: "POST",
  body: text,
});

request.text().then(function (text) {
  // do something with the text sent in the request
});
```

规范
--

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-text① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Response.text()`
Request.method
==============

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

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

语法
--
```

var myMethod = request.method;
```

### Value

A `ByteString` indicating the method of the request.

举例
--

In the following snippet, we create a new request using the `Request.Request()` constructor (for an image file in the same directory as the script), then save the method of the request in a variable:


```js
var myRequest = new Request("flowers.jpg");
var myMethod = myRequest.method; // GET
```

规范
--

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-method② |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ServiceWorker API (en-US)
* HTTP access control (CORS)
* HTTP
Request.headers
===============

`Request`接口的只读属性 **`headers`** 包含与当前请求关联的`Headers`对象。

语法
--
```

var myHeaders = request.headers;
```

### 值

一个 `Headers` 对象。

例子
--

在下面的代码段中，我们使用 `Request.Request()` 构造函数（为获取与脚本处于同一目录的图片文件）创建新请求，然后将请求 headers 保存到变量中：


```js
var myRequest = new Request("flowers.jpg");
var myHeaders = myRequest.headers; // Headers {}
```


使用 `Headers.append` 向 `Headers` 对象中添加 header；然后，使用第二个 init 参数创建一个新的 `Request` ，同时，传递 headers 作为一个 init 选项：


```js
var myHeaders = new Headers();
myHeaders.append("Content-Type", "image/jpeg");

var myInit = {
  method: "GET",
  headers: myHeaders,
  mode: "cors",
  cache: "default",
};

var myRequest = new Request("flowers.jpg", myInit);

myContentType = myRequest.headers.get("Content-Type"); // returns 'image/jpeg'
```

规范
--

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-headers② |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ServiceWorker API (en-US)
* HTTP access control (CORS)
* HTTP
Request.json()
==============

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

注意，尽管方法被命名为 `json()`，结果并不是 JSON，而是将输入作为 JSON 解析，以生成一个 JavaScript 对象。

语法
--


```js
json()
```

### 参数

无。

### 返回值

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

示例
--


```js
const obj = { hello: "world" };

const request = new Request("/myEndpoint", {
  method: "POST",
  body: JSON.stringify(obj),
});

request.json().then(function (data) {
  // do something with the data sent in the request
});
```

规范
--

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-json① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Response.json()`
Request.arrayBuffer()
=====================

`Request` 接口的 **`arrayBuffer()`** 方法读取请求体并将其作为一个 promise 返回，该 promise 将兑现一个 `ArrayBuffer`。

语法
--


```js
arrayBuffer()
```

### 参数

无。

### 返回值

一个 promise，会兑现一个 `ArrayBuffer`。

示例
--


```js
const myArray = new Uint8Array(10);

const request = new Request("/myEndpoint", {
  method: "POST",
  body: myArray,
});

request.arrayBuffer().then(function (buffer) {
  // do something with the buffer sent in the request
});
```

规范
--

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-arraybuffer① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Response.arrayBuffer()`
Request.cache
=============

**`cache`** 作为`Request` 接口只读属性包含着请求的缓存模式。它控制着请求以何种方式与浏览器的 HTTP 缓存进行交互。

Syntax
------


```js
var currentCacheMode = request.cache;
```

### Value

A `RequestCache` value. The available values are:

* `default` — 浏览器从 HTTP 缓存中寻找匹配的请求。
    + 如果缓存匹配上并且有效（ fresh）, 它将直接从缓存中返回资源。
    + 如果缓存匹配上但已经过期，浏览器将会使用传统（ conditional request ）的请求方式去访问远程服务器。如果服务器端显示资源没有改动，它将从缓存中返回资源。否则，如果服务器显示资源变动，那么重新从服务器下载资源更新缓存。
    + 如果缓存没有匹配，浏览器将会以普通方式请求，并且更新已经下载的资源缓存。
* `no-store` — 浏览器直接从远程服务器获取资源，不查看缓存，并且不会使用下载的资源更新缓存。
* `reload` — 浏览器直接从远程服务器获取资源，不查看缓存，然后使用下载的资源更新缓存。
* `no-cache` — 浏览器在其 HTTP 缓存中寻找匹配的请求。
    + 如果有匹配，无论是新的还是陈旧的，浏览器都会向远程服务器发出条件请求。如果服务器指示资源没有更改，则将从缓存中返回该资源。否则，将从服务器下载资源并更新缓存。
    + 如果没有匹配，浏览器将发出正常请求，并使用下载的资源更新缓存。`force-cache` — 浏览器在其 HTTP 缓存中寻找匹配的请求。
    + 如果有匹配项，不管是新匹配项还是旧匹配项，都将从缓存中返回。
    + 如果没有匹配，浏览器将发出正常请求，并使用下载的资源更新缓存。
* `only-if-cached` — 浏览器在其 HTTP 缓存中寻找匹配的请求。
    + 如果有匹配项 (新的或旧的)，则从缓存中返回。
    + 如果没有匹配，浏览器将返回一个错误。The `"only-if-cached"` mode can only be used if the request's `mode` is `"same-origin"`. Cached redirects will be followed if the request's `redirect` property is `"follow"` and the redirects do not violate the `"same-origin"` mode.
Example
-------


```js
// Download a resource with cache busting, to bypass the cache
// completely.
fetch("some.json", { cache: "no-store" }).then(function (response) {
  /\* consume the response \*/
});

// Download a resource with cache busting, but update the HTTP
// cache with the downloaded resource.
fetch("some.json", { cache: "reload" }).then(function (response) {
  /\* consume the response \*/
});

// Download a resource with cache busting when dealing with a
// properly configured server that will send the correct ETag
// and Date headers and properly handle If-Modified-Since and
// If-None-Match request headers, therefore we can rely on the
// validation to guarantee a fresh response.
fetch("some.json", { cache: "no-cache" }).then(function (response) {
  /\* consume the response \*/
});

// Download a resource with economics in mind! Prefer a cached
// albeit stale response to conserve as much bandwidth as possible.
fetch("some.json", { cache: "force-cache" }).then(function (response) {
  /\* consume the response \*/
});
```

Specifications
--------------

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-cache② |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* ServiceWorker API (en-US)
* HTTP access control (CORS)
* HTTP
Request.bodyUsed
================

`Request` 接口的只读属性 **`bodyUsed`** 是一个布尔值，表示请求体是否已经被读取。

值
-

一个布尔值。

示例
--


```js
const request = new Request("/myEndpoint", {
  method: "POST",
  body: "Hello world",
});

request.bodyUsed; // false

request.text().then(function (bodyAsText) {
  console.log(request.bodyUsed); // true
});
```

规范
--

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-bodyused① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Request.body`
Request.clone()
===============

`Request` 接口中的\*\*`clone()`\*\* 方法可以创建一个当前`Request` 对象的副本。

如果响应体`Body`已经被使用过，那么 `clone()` 会抛出一个 `TypeError`。实际上，`clone()` 的主要作用就是支持 `Body` 对象的多次使用

语法
--


```js
var newRequest = request.clone();
```

### 参数

无。

### 返回值

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

示例
--

在下面的代码中，我们使用 `Request.Request()` 构造函数创建了一个新的 request 对象 (请求当前文件夹中的一个图片文件)，然后拷贝了这个 `request` 对象。


```js
var myRequest = new Request("flowers.jpg");
var newRequest = myRequest.clone(); // a copy of the request is now stored in newRequest
```

规范
--

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-clone① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

了解更多
----

* ServiceWorker API (en-US)
* HTTP access control (CORS)
* HTTP
Request.formData()
==================

`Request` 接口的 **`formData()`** 方法读取请求体并将其作为 promise 返回，该 promise 将兑现一个 `FormData` 对象。

语法
--


```js
formData()
```

### 参数

无。

### 返回值

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

示例
--


```js
const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');

formData.append("username", "abc123");
formData.append("avatar", fileField.files[0]);

const request = new Request("/myEndpoint", {
  method: "POST",
  body: formData,
});

request.formData().then(function (data) {
  // do something with the formdata sent in the request
});
```

规范
--

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-formdata① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Response.formData()`
Request：body 属性
===============

`Request` 接口的只读 **`body`** 属性包含一个 `ReadableStream`，其中包含已添加到请求中的主体内容。请注意，使用 `GET` 或 `HEAD` 方法的请求不能有主体，这些情况下返回 `null`。

值
-

`ReadableStream` 或 `null`。

示例
--


```js
const request = new Request("/myEndpoint", {
  method: "POST",
  body: "Hello world",
});

request.body; // ReadableStream
```

规范
--

| Specification |
| --- |
| Fetch Standard # ref-for-dom-body-body① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Request.bodyUsed`
Document：fullscreenerror 事件
===========================

当浏览器不能切换至全屏模式时，会触发 `fullscreenerror` 事件。

与 `fullscreenchange` 事件一样，会触发两个 `fullscreenerror` 事件；第一个事件会发送给未能更改模式的 `Element`，第二个事件会发送给拥有该元素的 `Document`。

有关切换到全屏模式可能失败的原因，请参阅全屏 API 指南。

该事件不可取消。

语法
--

在类似于 `addEventListener()` 的方法中使用事件名称，或设置事件处理器属性。


```js
addEventListener("fullscreenerror", (event) => {});

onfullscreenerror = (event) => {};
```

事件类型
----

通用的 `Event`。

示例
--


```js
const requestor = document.querySelector("div");

function handleError(event) {
  console.error("切换至全屏模式时发生错误");
  console.log(event);
}

document.addEventListener("fullscreenerror", handleError);
// 或
document.onfullscreenerror = handleError;

requestor.requestFullscreen();
```

规范
--

| Specification |
| --- |
| Fullscreen API Standard # handler-document-onfullscreenerror |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `fullscreenchange`
* `Element`：`fullscreenerror` 事件
* 全屏 API
* 全屏 API 使用指南