recursal/MDN huggingface dataset:
FileSystemSyncAccessHandle：read() 方法
====================================

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

`FileSystemSyncAccessHandle` 接口的 **`read()`** 方法用于将与句柄相关联文件的内容读取到指定的缓冲区中，可选择在给定的偏移处开始读取。

语法
--


```js
read(buffer, options)
```

### 参数

`buffer`

一个表示要将文件内容读取到的缓冲区的 `ArrayBuffer` 或者 `ArrayBufferView` 对象（例如一个 `DataView`）。注意：你无法直接操作 `ArrayBuffer` 中的内容，应该先创建一个像 `Int8Array` 或者 `DataView` 这样的类型化数组对象，用来把缓冲区表示成特定的格式，然后再用类型化数组对象来读写缓冲区的内容。

`options` 可选

一个包含以下属性的选项对象：

`at`

一个表示应当从文件何处开始读取的字节偏移量数字。


### 返回值

一个表示从文件读取的字节数的数字。

### 异常

`InvalidStateError` `DOMException`

如果相关的访问句柄已经被关闭，抛出此异常。

`TypeError`

如果底层文件系统不支持从指定的偏移处开始读取文件，抛出此错误。

示例
--

下面的异步事件处理函数包含在一个 Web Worker 中。当收到来自主线程的消息时，它将执行：

* 创建一个同步文件访问句柄。
* 获取文件的大小然后创建一个 `ArrayBuffer` 来容纳其内容。
* 将文件内容读取到缓冲区。
* 将收到的消息编码然后写入到文件的末尾。
* 将更改保存到磁盘然后关闭访问句柄。


```js
onmessage = async (e) => {
  // 接收从主线程发来的消息
  const message = e.data;

  // 获取草稿文件的句柄
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 获取同步访问句柄
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // 获取文件的大小
  const fileSize = accessHandle.getSize();
  // 读取文件内容到缓冲区
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // 将消息写入文件末尾
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // 将更改持久化至磁盘
  accessHandle.flush();

  // 用完 FileSystemSyncAccessHandle 后记得把它关闭
  accessHandle.close();
};
```


**备注：** 在规范早期版本中，`close()`、`flush()`、`getSize()` 和 `truncate()` 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。

规范
--

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-read |

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

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

参见
--

* 文件系统 API
* 文件系统访问 API：简化本地文件访问
FileSystemSyncAccessHandle：truncate() 方法
========================================

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

`FileSystemSyncAccessHandle` 接口的 **`truncate()`** 方法用于将与句柄相关联文件的大小调整为指定的字节数。

**备注：** 在规范早期版本中，`close()`、`flush()`、`getSize()` 和 `truncate()` 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。

语法
--


```js
truncate(newSize)
```

### 参数

`newSize`

要将文件调整到的字节数。

### 返回值

无（`undefined`）。

### 异常

`InvalidStateError` `DOMException`

如果相关的访问句柄已经被关闭，或者由于其他原因导致修改文件的二进制数据失败，抛出此异常。

`QuotaExceededError` `DOMException`

如果 `newSize` 大于文件原来的大小并且超出了浏览器的存储配额，抛出此异常。

`TypeError`

如果底层文件系统不支持将文件大小设为新的大小，抛出此错误。

Examples
--------


```js
async function truncateFile() {
  // 获取草稿文件的句柄
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 获取同步访问句柄
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // 将文件裁剪至 0 字节
  accessHandle.truncate(0);

  // 将更改持久化至磁盘
  accessHandle.flush();

  // 用完 FileSystemSyncAccessHandle 后记得把它关闭
  accessHandle.close();
}
```

规范
--

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-truncate |

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

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

参见
--

* 文件系统 API
* 文件系统访问 API：简化本地文件访问
FileSystemSyncAccessHandle：getSize() 方法
=======================================

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

`FileSystemSyncAccessHandle` 接口的 **`getSize()`** 方法用于返回与句柄相关联文件的字节大小。

**备注：** 在规范早期版本中，`close()`、`flush()`、`getSize()` 和 `truncate()` 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。

语法
--


```js
getSize()
```

### 参数

无。

### 返回值

一个表示文件字节大小的数字。

### 异常

`InvalidStateError` `DOMException`

如果相关的访问句柄已经被关闭，抛出此异常。

示例
--

下面的异步事件处理函数包含在一个 Web Worker 中。当收到来自主线程的消息时，它将执行：

* 创建一个同步文件访问句柄。
* 获取文件的大小然后创建一个 `ArrayBuffer` 来容纳其内容。
* 将文件内容读取到缓冲区。
* 将收到的消息编码然后写入到文件的末尾。
* 将更改保存到磁盘然后关闭访问句柄。


```js
onmessage = async (e) => {
  // 接收从主线程发来的消息
  const message = e.data;

  // 获取草稿文件的句柄
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 获取同步访问句柄
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // 获取文件的大小
  const fileSize = accessHandle.getSize();
  // 读取文件内容到缓冲区
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // 将消息写入文件末尾
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // 将更改持久化至磁盘
  accessHandle.flush();

  // 用完 FileSystemSyncAccessHandle 后记得把它关闭
  accessHandle.close();
};
```

规范
--

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-getsize |

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

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

参见
--

* 文件系统 API
* 文件系统访问 API：简化本地文件访问
FileSystemSyncAccessHandle：flush() 方法
=====================================

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

`FileSystemSyncAccessHandle` 接口的 **`flush()`** 方法用于将通过 `write()` 方法对句柄相关联的文件所做的所有更改持久化保存到磁盘上。

请记住：只当你需要在指定的时间将更改提交到磁盘的时候才需要调用这个方法，不然你可以让底层操作系统在其认为合适的时间点处理这项任务，这大多数情况下都不会有问题。

**备注：** 在规范早期版本中，`close()`、`flush()`、`getSize()` 和 `truncate()` 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。

语法
--


```js
flush()
```

### 参数

无。

### 返回值

无（`undefined`）。

### 异常

`InvalidStateError` `DOMException`

如果相关的访问句柄已经被关闭，抛出此异常。

示例
--

下面的异步事件处理函数包含在一个 Web Worker 中。当收到来自主线程的消息时，它将执行：

* 创建一个同步文件访问句柄。
* 获取文件的大小然后创建一个 `ArrayBuffer` 来容纳其内容。
* 将文件内容读取到缓冲区。
* 将收到的消息编码然后写入到文件的末尾。
* 将更改保存到磁盘然后关闭访问句柄。


```js
onmessage = async (e) => {
  // 接收从主线程发来的消息
  const message = e.data;

  // 获取草稿文件的句柄
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 获取同步访问句柄
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // 获取文件的大小
  const fileSize = accessHandle.getSize();
  // 读取文件内容到缓冲区
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // 将消息写入文件末尾
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // 将更改持久化至磁盘
  accessHandle.flush();

  // 用完 FileSystemSyncAccessHandle 后记得把它关闭
  accessHandle.close();
};
```

规范
--

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-flush |

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

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

参见
--

* 文件系统 API
* 文件系统访问 API：简化本地文件访问
FileSystemSyncAccessHandle：write() 方法
=====================================

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

`FileSystemSyncAccessHandle` 接口的 **`write()`** 方法用于将指定缓冲区中的内容写入到与句柄相关联的文件，可选择在给定的偏移处开始写入。

源私有文件系统中的文件对末端用户来说不可见，因而 `FileSystemSyncAccessHandle` 中的方法不受与运行在用户可见文件系统中的文件上的方法相同的安全性检查。因此，使用 `FileSystemSyncAccessHandle.write()` 进行写入的性能要更为优秀。这使得它适用于重要的、大规模的文件更新，例如对 SQLite 数据库进行更改。

语法
--


```js
write(buffer, options)
```

### 参数

`buffer`

一个表示要写入到文件的缓冲区的 `ArrayBuffer` 或者 `ArrayBufferView` 对象（例如一个 `DataView`）。

`options` 可选

一个包含以下属性的选项对象：

`at`

一个表示应当从文件何处开始写入缓冲区的字节偏移量数字。


**备注：** 你无法直接操作 `ArrayBuffer` 中的内容，应该先创建一个像 `Int8Array` 或者 `DataView` 这样的类型化数组对象，用来把缓冲区表示成特定的格式，然后再用类型化数组对象来读写缓冲区的内容。

### 返回值

一个表示写入到文件的字节数的数字。

### 异常

`InvalidStateError` `DOMException`

如果相关的访问句柄已经被关闭，或者对文件二进制数据的修改彻底失败，抛出此异常。

`QuotaExceededError` `DOMException`

如果增长后的数据量超出了浏览器的存储配额，抛出此异常。

`TypeError`

如果底层文件系统不支持从指定的文件偏移处开始写入，抛出此错误。

示例
--

下面的异步事件处理函数包含在一个 Web Worker 中。当收到来自主线程的消息时，它将执行：

* 创建一个同步文件访问句柄。
* 获取文件的大小然后创建一个 `ArrayBuffer` 来容纳其内容。
* 将文件内容读取到缓冲区。
* 将收到的消息编码然后写入到文件的末尾。
* 将更改保存到磁盘然后关闭访问句柄。


```js
onmessage = async (e) => {
  // 接收从主线程发来的消息
  const message = e.data;

  // 获取草稿文件的句柄
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 获取同步访问句柄
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // 获取文件的大小
  const fileSize = accessHandle.getSize();
  // 读取文件内容到缓冲区
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // 将消息写入文件末尾
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // 将更改持久化至磁盘
  accessHandle.flush();

  // 用完 FileSystemSyncAccessHandle 后记得把它关闭
  accessHandle.close();
};
```


**备注：** 在规范早期版本中，`close()`、`flush()`、`getSize()` 和 `truncate()` 被错误地规定为异步方法。某些浏览器的旧版本是依照异步方式来实现这些方法的，不过，现今所有支持这些方法的浏览器都将它们实现为同步方法。

规范
--

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-write |

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

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

参见
--

* 文件系统 API
* 文件系统访问 API：简化本地文件访问
getBBox
=======

\*\*`SVGGraphicsElement.getBBox()`\*\*允许我们确定对象适合的最小矩形的坐标。返回的坐标是相对于当前 svg 空间的，即在将所有几何属性应用于目标元素中包含的所有元素之后。

Note: `getBBox` must return the actual bounding box at the time the method was called, even in case the element has not yet been rendered. It also neglects any transformation applied on the element or its parents.

**备注：** `getBBox` returns different values than getBoundingClientRect, as the latter returns value relative to the viewport

Syntax
------
```

let bboxRect = object.getBBox();
```

### Return value

The returned value is a SVGRect (en-US) object, which defines the bounding box. This value is irrespective of any transformation attribute applied to it or the parent elements.

Example
-------

### HTML


```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <g id="group\_text\_1">
    <text x="5" y="16" transform="scale(2, 2)">Hello World!</text>
    <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">
      Hello World Again!
    </text>
  </g>
  <!-- Shows BBox in green -->
  <rect id="rect\_1" stroke="#00ff00" stroke-width="3" fill="none"></rect>
  <!-- Shows BoundingClientRect in red -->
  <rect id="rect\_2" stroke="#ff0000" stroke-width="3" fill="none"></rect>
</svg>
```

### JavaScript


```js
var rectBBox = document.querySelector("#rect\_1");
var rectBoundingClientRect = document.querySelector("#rect\_2");
var groupElement = document.querySelector("#group\_text\_1");

var bboxGroup = groupElement.getBBox();
rectBBox.setAttribute("x", bboxGroup.x);
rectBBox.setAttribute("y", bboxGroup.y);
rectBBox.setAttribute("width", bboxGroup.width);
rectBBox.setAttribute("height", bboxGroup.height);

var boundingClientRectGroup = groupElement.getBoundingClientRect();
rectBoundingClientRect.setAttribute("x", boundingClientRectGroup.x);
rectBoundingClientRect.setAttribute("y", boundingClientRectGroup.y);
rectBoundingClientRect.setAttribute("width", boundingClientRectGroup.width);
rectBoundingClientRect.setAttribute("height", boundingClientRectGroup.height);
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGGraphicsElement\_\_getBBox |

See also
--------

* getBBox in SVG Primer
GamepadButton.pressed
=====================

`GamepadButton`接口下的 **`GamepadButton.pressed`** 属性返回一个表示按钮当然是被按下了 (`true`) 还是没有被按下 (`false`) 的布尔值。

语法
--
```

var isPressed = navigator.getGamepads()[0].pressed;
```

示例
--


```js
var gp = navigator.getGamepads()[0]; // 获取第一个控制器对象

if (gp.buttons[0].pressed == true) {
  // 响应按钮按下
}
```

值
-

一个 `boolean` (en-US) (布尔值)。

规范
--

| Specification |
| --- |
| Gamepad # dom-gamepadbutton-pressed |

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

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

参见
--

* 使用 Gamepad API
GamepadButton.value
===================

`GamepadButton`接口下的 **`GamepadButton.value`** 属性返回一个双精浮点值来表示许多现代控制器上的模拟按钮的状态，比如说扳机键。

其值被规范于范围 `0.0` — `1.0` 内， `0.0` 表示按钮没有被按下，`1.0` 则表示按钮被完全按下。

语法
--


```js
var pressState = navigator.getGamepads()[0].value;
// 只读属性、双精浮点值
```

示例
--


```js
var gp = navigator.getGamepads()[0];

if (gp.buttons[0].value > 0) {
  // 响应模拟按钮被按下
}
```

值
-

一个 `double` (双精浮点值)。

规范
--

| Specification |
| --- |
| Gamepad # dom-gamepadbutton-value |

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

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

参见
--

使用 Gamepad API
Response.arrayBuffer()
======================

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

`Response`上的方法 **`arrayBuffer()`** 接受一个 `Response` 流，并等待其读取完成。它返回一个 promise 实例，并 resolve 一个 `ArrayBuffer` 对象。

语法
--


```js
response.arrayBuffer().then(function(buffer) {
  // do something with buffer
)};
```

### 参数

无。

### 返回值

A promise that resolves with an `ArrayBuffer`.

例子
--

In our fetch array buffer example (run fetch array buffer live), we have a Play button. When pressed, the `getData()` function is run.

In `getData()` we create a new request using the `Request.Request` constructor, then use it to fetch an OGG music track. We also use `AudioContext.createBufferSource` to create an audio buffer source. When the fetch is successful, we read an `ArrayBuffer` out of the response using `arrayBuffer()`, decode the audio data using `AudioContext.decodeAudioData`, set the decoded data as the audio buffer source's buffer (`source.buffer`), then connect the source up to the `AudioContext.destination`.

Once `getData()` has finished running, we start the audio source playing with `start(0)`, then disable the play button so it can't be clicked again when it is already playing (this would cause an error.)


```js
function getData() {
  source = audioCtx.createBufferSource();

  var myRequest = new Request("viper.ogg");

  fetch(myRequest).then(function (response) {
    response.arrayBuffer().then(function (buffer) {
      audioCtx.decodeAudioData(buffer, function (decodedData) {
        source.buffer = decodedData;
        source.connect(audioCtx.destination);
      });
    });
  });
}

// wire up buttons to stop and play audio

play.onclick = function () {
  getData();
  source.start(0);
  play.setAttribute("disabled", "disabled");
};
```

规范
--

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

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

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

参考
--

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

`Response` 对象中的\*\*`formData()`\*\* 方法将 `Response` 对象中的所承载的数据流读取并封装成为一个对象，该方法将返回一个 **`Promise`** 对象，该对象将产生一个`FormData` 对象。

**备注：** 该方法主要与 service worker 有关。如果客户端提交的一个表单请求被 Service Worker 所截取，你可以像下述的样例一样，调用 `formData()` 方法来获取一个 key-value 字典，对该字典可以进行修饰，然后将修饰后的表填提交给远端服务器 (或在本地应用)。

语法
--
```

response.formData()
.then(function(formdata) {
  // do something with your formdata
});
```

### 参数

无。

### 返回值

生成 `FormData`对象的`Promise` (en-US) 对象。

样例
--

待定。

规范
--

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

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
Response.blob()
===============

`Response` mixin 的 \*\*`blob()`\*\*方法使用一个 `Response` 流，并将其读取完成。它返回一个使用`Blob`解决的 promise。

句法
--


```js
response.blob().then(function (myBlob) {
  // do something with myBlob
});
```

### 参数

None.

### 返回值

A promise that resolves with a `Blob`.

例子
--

在我们 fetch request example (run fetch request live) 中，我们使用Request.Request构造方法创建了一个新的 request 对象，然后使用它来获取一个 JPG 文件。当 fetch 成功的时候，我们使用 blob() 从 response 中读取一个Blob对象，并使用URL.createObjectURL 将它放入一个 object URL，然后把 URL 设置为img元素的 src 属性以显示这张图片。


```js
var myImage = document.querySelector("img");

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

fetch(myRequest)
  .then(function (response) {
    return response.blob();
  })
  .then(function (myBlob) {
    var objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
```

规范
--

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

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

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

另见
--

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

`Response` mixin 的 **`text()`** 方法提供了一个可供读取的“返回流”（`Response` stream），并将它读取完。它返回一个包含 `USVString` 对象（也就是文本）的 Promise 对象，返回结果的编码*永远是* UTF-8。

语法
--


```js
response.text().then(function (text) {
  // do something with the text response
});
```

### 参数

无。

### 返回值

A promise that resolves with a `USVString`.

示例
--

在我们 fetch text example (运行 fetch text live) 的案例中，我们有一个 `<article>` 元素和三个链接（储存在 `myLinks` 数组中），首先，遍历 `myLinks` 数组，并且给数组中的所有元素添加 `onclick` 事件监听器，当按钮被点击的时候，链接的 `data-page` 标识作为会参数传入 `getData()` 中。

当进入 `getData()` 函数，我们使用 `Request()` 构造函数创建了一个请求（Request）对象，然后，使用它获取指定的`.txt`的文件，当 fetch 函数执行成功，我们使用 `text()` 函数来返回一个`USVString` (text) 对象，将它设置到 `<article>` 对象的`innerHTML`（元素文本）中。


```js
const myArticle = document.querySelector("article");
const myLinks = document.querySelectorAll("ul a");

for (i = 0; i <= myLinks.length - 1; i++) {
  myLinks[i].onclick = function (e) {
    e.preventDefault();
    var linkData = e.target.getAttribute("data-page");
    getData(linkData);
  };
}

function getData(pageId) {
  console.log(pageId);
  const myRequest = new Request(pageId + ".txt");
  fetch(myRequest).then(function (response) {
    return response.text().then(function (text) {
      myArticle.innerHTML = text;
    });
  });
}
```

规范
--

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

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

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
Response.status
===============

`Response` 接口的\*\*`status`\*\* 只读属性包含响应的状态代码（例如，成功为 200）。

语法
--
```

let myStatus = response.status;
```

### 值

一个数字（确切来讲是一个 unsigned short）

示例
--

In our Fetch Response example (see Fetch Response live) we create a new `Request` object using the `Request()` constructor, passing it a JPG path. We then fetch this request using `fetch()`, extract a blob from the response using `Body.blob` (en-US), create an object URL out of it using `URL.createObjectURL`, and display this in an `<img>`.

Note that at the top of the `fetch()` block we log the response `status` value to the console.


```js
var myImage = document.querySelector("img");

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

fetch(myRequest).then(function (response) {
  console.log(response.status); // returns 200
  response.blob().then(function (myBlob) {
    var objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
});
```

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

| Specification |
| --- |
| Fetch Standard # ref-for-dom-response-status① |

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
Response.bodyUsed
=================

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

**`bodyUsed`** 是 `Response` mixin 中的一个只读属性。用以表示该 body 是否被使用过。

语法
--


```js
var myBodyUsed = response.bodyUsed;
```

### 可能的值

`Boolean` (en-US).

示例
--

在以下fetch 请求示例（运行 fetch request live）。通过`Request.Request`构造器创建了一个 fetch 请求，来获得一张 JPG 图片。当 fetch 成功后，通过`Blob` 来使用了 fetch 返回的资源--`URL.createObjectURL`创建该资源的 URL，并作为 `<img>`元素的 src 源来显示图片。

注意：在 `response.blob()` 被调用前后，输出 `response.bodyUsed` 的差异。

### HTML Content


```html
<img
 class="my-image"
 src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png" />
```

### JS Content


```js
var myImage = document.querySelector(".my-image");
fetch("https://upload.wikimedia.org/wikipedia/commons/7/77/Delete\_key1.jpg")
  .then(function (response) {
    console.log(response.bodyUsed);
    var res = response.blob();
    console.log(response.bodyUsed);
    return res;
  })
  .then(function (response) {
    var objectURL = URL.createObjectURL(response);
    myImage.src = objectURL;
  });
```

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

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

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

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
Response.ok
===========

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

`Response` 接口的只读属性 **`ok`** 包含一个布尔值，表明响应是否成功（状态码在 200-299 范围内）.

语法
--
```

var myOK = response.ok;
```

### 值

`Boolean` (en-US).

示例
--

In our Fetch Response example (see Fetch Response live) we create a new `Request` object using the `Request()` constructor, passing it a JPG path. We then fetch this request using `fetch()`, extract a blob from the response using `Body.blob` (en-US), create an object URL out of it using `URL.createObjectURL`, and display this in an `<img>`.

Note that at the top of the `fetch()` block we log the response `ok` value to the console.


```js
var myImage = document.querySelector("img");

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

fetch(myRequest).then(function (response) {
  console.log(response.ok); // returns true if the response returned successfully
  response.blob().then(function (myBlob) {
    var objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
});
```

规范
--

| Specification |
| --- |
| Fetch Standard # ref-for-dom-response-ok② |

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

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

参见
--

* ServiceWorker API
* HTTP 访问控制（CORS）
* HTTP
Response.redirected
===================

`Response` 接口中只读的 **`redirected`** 属性表明该响应是否为一个重定向的请求的结果。

**备注：** 依赖 **`redirected`** 过滤重定向很容易导致虚假的重定向阻止你的内容像预期一样生效。因此，当调用 `fetch()` 时你应该进行过滤操作。详见下面 禁用重定向 的例子。

语法
--
```

var isRedirected = Response.redirected;
```

### 返回值

一个布尔值 (`Boolean` (en-US)), 如果响应来自重定向的请求，那么将返回 `true`.

示例
--

### 检测重定向

检测某个响应是否来自一个重定向的请求就如同检测 `Response` 对象中这个标识一样容易。在下面的代码中，当 fetch 操作引起了重定向，一段文本信息会被插入到元素中。但需要注意的是，这不像下面 禁用重定向 所描述的当重定向不合法时全部阻止的行为一样安全。


```js
fetch("awesome-picture.jpg")
  .then(function (response) {
    let elem = document.getElementById("warning-message-box");
    if (response.redirected) {
      elem.innerHTML = "Unexpected redirect";
    } else {
      elem.innerHTML = "";
    }
    return response.blob();
  })
  .then(function (imageBlob) {
    let imgObjectURL = URL.createObjectURL(imageBlob);
    document.getElementById("img-element-id").src = imgObjectURL;
  });
```

### 禁用重定向

由于使用 **`redirected`** 过滤重定向会允许虚假的重定向，你应该像下面的例子这样，当调用 `fetch()` 时在 `init` 参数中设置重定向模式为 `"error"` :


```js
fetch("awesome-picture.jpg", { redirect: "error" })
  .then(function (response) {
    return response.blob();
  })
  .then(function (imageBlob) {
    let imgObjectURL = URL.createObjectURL(imageBlob);
    document.getElementById("img-element-id").src = imgObjectURL;
  });
```

规范
--

| Specification |
| --- |
| Fetch Standard # ref-for-dom-response-redirected① |

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

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

参见
--

* Fetch API
* ServiceWorker API
* HTTP 访问控制（CORS）
* HTTP