recursal/MDN huggingface dataset:
Response.json()
===============

`Response` mixin 的 **`json()`** 方法接收一个 `Response` 流，并将其读取完成。它返回一个 Promise，Promise 的解析 resolve 结果是将文本体解析为 `JSON`。语法
--


```js
response.json().then((data) => {
  // do something with your data
});
```

### 参数

没有。

### 返回值

返回一个被解析为 `JSON` 格式的 promise 对象，这可以是任何可以由 JSON 表示的东西 - 一个 object，一个 array，一个 string，一个 number...

示例
--

在我们的 fetch json 示例 中 (运行 fetch json live), 我们使用 `Request.Request` 构造函数创建一个新的请求，然后使用它来获取一个 `.json` 文件。当获取成功时，我们使用 `json()` 读取并解析数据，然后像预期的那样从结果对象中读取值，并将其插入到列表项中以显示我们的产品数据。


```js
const myList = document.querySelector("ul");
const myRequest = new Request("products.json");

fetch(myRequest)
  .then((response) => response.json())
  .then((data) => {
    for (const product of data.products) {
      let listItem = document.createElement("li");
      listItem.appendChild(document.createElement("strong")).textContent =
        product.Name;
      listItem.append(` can be found in ${product.Location}. Cost: `);
      listItem.appendChild(document.createElement("strong")).textContent =
        `£${product.Price}`;
      myList.appendChild(listItem);
    }
  });
```

规范
--

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

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

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

参见
--

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

`Response` 接口的 **`type`** 只读属性包含一种响应的类型。它可以是以下某一种值：

* `basic`：标准值，同源响应，暴露除了“Set-Cookie”之外的所有标头。
* `cors`：从有效的跨源请求接收到响应。某些标头和主体可以被访问。
* `error`：网络错误。没有有用的描述错误的信息。响应的状态为 0，header 为空且不可变。这是从 `Response.error()` 中获得的响应的类型。
* `opaque`：对跨源资源的“no-cors”请求的响应。严格限制。
* `opaqueredirect`：fetch 请求是通过 `redirect: "manual"` 发出的。响应的状态是 0，标头是空的，主体是 null，trailer 是空的。

**备注：** “错误”响应从来没有真正暴露于脚本：这样的响应，`fetch()` 将被 promise 拒绝。

值
-

`ResponseType` 字符串表示响应的类型。

示例
--

 在我们的 Fetch 响应示例中（参见 Fetch 响应在线演示），我们使用 `Request()` 构造函数创建了一个新的 `Request` 对象，并向其传递了一个 JPG 路径。然后，我们使用
 `fetch()` 获取到这个请求，使用 `Response.blob` 从响应中提取到 blob，使用 `URL.createObjectURL` 从中创建一个对象的 URL，并将其显示在 `<img>` 中。

注意，在 `fetch()` 代码块的顶部，我们将响应的 `type` 记录在控制台。


```js
const myImage = document.querySelector("img");
const myRequest = new Request("flowers.jpg");
fetch(myRequest).then((response) => {
  console.log(response.type); // returns basic by default
  response.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
});
```

规范
--

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

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

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

参见
--

* ServiceWorker API
* HTTP 访问控制（CORS）
* HTTP
Response.clone()
================

`Response` 接口的 **`clone()`** 方法创建一个响应对象的克隆，这个对象在所有方面都是相同的，但是储存在不同的变量中。

类似于底层的 `ReadableStream.tee` api，克隆的 `Response` 的 `body` 将以两个 body 的更*快*消费者的速度发出背压信号，并且未读的数据在消费较慢的 `body` 上进行内部排队，没有任何限制或者背压。背压指的是数据流消费者（如这种情况，读取响应正文的代码）让数据生产者减缓速度（如 TCP 服务器）以免在应用程序等待使用的内存中加载大量数据的机制。如果仅消费了一个克隆分支，那么整个 body 都将在内存中缓冲。因此，`clone()` 是按顺序读取两次响应的一种方式，但是你不应该在并行时以不同的速度使用它读取非常大的 body。

如果响应体已经被使用，`clone()` 抛出 `TypeError`。事实上，`clone()` 存在的主要原因是允许 body 对象可以使用多次（当它们是一次性使用时）。

语法
--


```js
clone()
```

### 参数

无。

### 返回值

一个 `Response` 对象。

示例
--

在我们的 Fetch Response 克隆示例（请参阅在线 Fetch Response 克隆示例）我们使用 `Request()` 构造函数创建一个新的 `Request` 来传递一个 JPG 路径。然后我们使用 `fetch()` 获取这个请求。当 fetch 成功兑现时，我们克隆它，使用两个 `Body.blob` (en-US) 调用从两个响应中提取 blob，使用 `URL.createObjectURL` 从 blob 创建对象 URL，并将它们显示在两个单独的 `<img>` 元素中。


```js
const image1 = document.querySelector(".img1");
const image2 = document.querySelector(".img2");

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

fetch(myRequest).then((response) => {
  const response2 = response.clone();

  response.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    image1.src = objectURL;
  });

  response2.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    image2.src = objectURL;
  });
});
```

规范
--

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

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

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

参见
--

* ServiceWorker API
* HTTP access control (CORS)
* HTTP
Response.headers
================

`Response` 接口的只读属性 **`headers`** 包含与响应关联的`Headers`对象。

语法
--
```

var myHeaders = response.headers;
```

### 值

一个 `Headers` 对象。

例程
--

在我们的 Fetch Response example 例程中（详见 Fetch Response live），我们使用`Request()`构造函数创建了一个新的`Request`对象，传入了一个 jpg 路径。我们接着使用`fetch()`触发了请求，用`Body.blob` (en-US)从响应中提取了 blob 实例，使用`URL.createObjectURL`创建了一个 URL 对象，然后显示在了`<img>`中。

注意，在`fetch()`的顶级块中我们输出了`headers`到控制台。


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

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

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

规范
--

| Specification |
| --- |
| Fetch Standard # ref-for-dom-response-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
Response.error()
================

`Response` 接口的 `error()` 方法返回一个包含网络错误相关信息的新 `Response` 对象。

**备注：** 这主要与 Service Workers 有关；如果你愿意，可以使用 error 方法返回错误。错误响应的 `type` 被设置为 `error`。

**备注：** 一个“错误”的 `Response` 不会真正地暴露给脚本：例如 `fetch()` 的“错误”响应将会返回 promise 的 reject 状态。

语法
--
```

error()
```

### 参数

无

### 返回值

一个 `Response` 对象。

示例
--

待定（似乎还没有在任何地方得到支持）。

规范
--

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

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

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：url 属性
===============

`Response` 接口的只读属性 **`url`** 包含了响应的 URL 地址。`url` 属性值为经过重定向后最终获得的 URL 地址。

值
-

一个字符串。

示例
--

在 Fetch Response 示例 中（请参见 Fetch Response 实时演示），我们使用 `Request()` 构造函数创建了一个新的 `Request` 对象，并向其传递了 JPG 的路径。然后，我们使用 `fetch()` 获取该请求，使用 `Response.blob` 从响应中提取一个 blob，使用 `URL.createObjectURL` 从中创建一个对象 URL，并将其显示在 `<img>` 中。

请注意，在 `fetch()` 块的顶部，我们会将响应 `URL` 记录到控制台。


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

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

fetch(myRequest)
  .then((response) => {
    console.log("response.url =", response.url); // response.url = https://mdn.github.io/dom-examples/fetch/fetch-response/flowers.jpg
    return response.blob();
  })
  .then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
```

规范
--

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

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

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

参见
--

* ServiceWorker API
* HTTP 访问控制（CORS）
* HTTP
Response.redirect()
===================

`Response` 接口的 **`redirect()`** 方法返回一个可以重定向到指定 URL 的 `Response` 。

**备注：** 主要和 ServiceWorker API (en-US) 有关。A controlling service worker could intercept a page's request and redirect it as desired. This will actually lead to a real redirect if a service worker sends it upstream.

语法
--
```

var response = Response.redirect(url, status);
```

### 参数

`url`

The URL that the new response is to originate from.

`status` 可选

用于 response 的可选的状态码 (e.g., `302`.)

### 返回值

一个 `Response` 对象。

### 异常

| 异常类型 | 说明 |
| --- | --- |
| `RangeError` | status 不是一个重定向的状态码。 |
| `TypeError` | url 不可用。 |

示例
--


```js
responseObj.redirect("https://www.example.com", 302);
```

规范
--

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

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

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

参阅
--

* ServiceWorker API (en-US)
* HTTP 访问控制 (CORS)
* HTTP
Response()
==========

**`Response()`** 构造函数创建了一个新的 `Response` 对象。

语法
--
```

let myResponse = new Response(body, init);
```

### 参数

*body* 可选

一个定义 response 中 body 的对象。可以为 `null` ，或是以下其中一个：

* `Blob`
* `BufferSource`
* `FormData`
* `ReadableStream`
* `URLSearchParams`
* `USVString`

*init* 可选

一个参数 (options) 对象，包含要应用到 response 上的任何自定义设置。可能参数 (options) 是：

* `status`: response 的状态码，例如：`200`.
* `statusText`: 和状态码关联的状态消息，例如：`OK`.
* `headers`: 你想加到 response 上的任何 headers，包含了一个 `Headers` 对象或满足对象语法的 `ByteString` key/value 对 (详见 HTTP headers).

例子
--

在我们的 Fetch Response 示例中 (参见Fetch Response live) 我们使用构造函数创建了一个新的 Response 对象，传递一个新的 `Blob` 作为 body，和一个包含自定义 `status` 和`statusText`的 init 对象：


```js
var myBlob = new Blob();
var init = { status: 200, statusText: "SuperSmashingGreat!" };
var myResponse = new Response(myBlob, init);
```

规范
--

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

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

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.body
=============

`Response` 接口的只读属性 **`body`** 是暴露响应体内容的 `ReadableStream`。

值
-

一个 `ReadableStream`，或者对于使用空的 `body` 属性构建的任意的 `Response` 对象，或没有任何主体的实际 HTTP 响应，则为 `null`。

**备注：** 对于没有主体的响应（例如，对 `HEAD` 请求的响应或 `204 No Content`），当前的浏览器实际上不符合将 `body` 属性设置为 `null` 的规范要求。

示例
--

在我们的简单 pump 流示例中，我们获取一个图片，使用 `response.body` 暴露响应的流，用 `ReadableStream.getReader()` 创建一个 reader，然后将其置入第二个自定义读取流中——有效的创建了一个完全相同的图片副本。


```js
const image = document.getElementById("target");

// 请求原始图片
fetch("./tortoise.png")
  // 取出 body
  .then((response) => response.body)
  .then((body) => {
    const reader = body.getReader();

    return new ReadableStream({
      start(controller) {
        return pump();

        function pump() {
          return reader.read().then(({ done, value }) => {
            // 读不到更多数据就关闭流
            if (done) {
              controller.close();
              return;
            }

            // 将下一个数据块置入流中
            controller.enqueue(value);
            return pump();
          });
        }
      },
    });
  })
  .then((stream) => new Response(stream))
  .then((response) => response.blob())
  .then((blob) => URL.createObjectURL(blob))
  .then((url) => console.log((image.src = url)))
  .catch((err) => console.error(err));
```

规范
--

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

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

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

参见
--

* Fetch API
* Stream API
* ServiceWorker API (en-US)
WritableStreamDefaultController.error()
=======================================

`WritableStreamDefaultController` 接口的 **`error()`** 方法会导致未来任何与关联的流的交互出错。

这个方法很少被使用，因为通常从底层接收器的一个方法返回一个拒绝的 promise 足矣。但是，在响应与底层接收器交互的正常生命周期之外的事件中，使用 error() 来立即关闭一个流则会很有用。

语法
--


```js
error(message)
```

### 参数

`message`

一个字符串，表示你希望在调用该方法以后的交互所应该抛出的错误。

### 返回值

无（`undefined`）。

### 异常

`TypeError`

你尝试调用 error 方法的流不是一个 `WritableStream`。

示例
--


```js
const writableStream = new WritableStream({
  start(controller) {
    // do stuff with controller
    // error stream if necessary
    controller.error('My error is broken');
  },
  write(chunk, controller) {
    ...
  },
  close(controller) {
    ...
  },
  abort(err) {
    ...
  }
});
```

规范
--

| Specification |
| --- |
| Streams Standard # ref-for-ws-default-controller-error① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSStyleDeclaration.getPropertyCSSValue()
=========================================

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

**CSSStyleDeclaration.getPropertyCSSValue()** 方法接口返回一个`CSSValue` 包含一个属性的 CSS 值。请注意，如果属性名称是速记属性，则返回 null。

现在你应该使用 `CSSStyleDeclaration.getPropertyValue()`。

语法
--
```

let value = style.getPropertyCSSValue(property);
```

### 参数

* *`property`* is a `DOMString` representing the property name to be retrieved.
### 返回值

* `value` is a `CSSValue` containing the CSS value for a property. If none exists, returns `null`.
示例
--

The following JavaScript code gets an object containing the computed RGB values of the `color` CSS property:


```js
var style = window.getComputedStyle(elem, null);
var rgbObj = style.getPropertyCSSValue("color").getRGBColorValue();
```

规范
--

该特性最初在 DOM Style Level 2 中定义，但从那时起已从标准化工作中移除。

它已被现代、不兼容的 CSS 类型对象模型 API (en-US) 取代，该 API 已被标准化。

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSStyleDeclaration.getPropertyPriority()
=========================================

**CSSStyleDeclaration.getPropertyPriority()** 方法会根据传入的 CSS 属性，返回一个 `DOMString` 来表示该属性的优先级。

Syntax
------
```

var priority = style.getPropertyPriority(property);
```

### 参数

* *`property`* 是一个`DOMString`，表示要检查的属性名。
### 返回值

* `priority` 是一个`DOMString`，用以表示属性优先级。存在，就返回（例如：`"important"`）；不存在，则返回空字符串。
例子
--

下面的代码检查了`margin`，在 CSS 规则中是否被设置为 important 优先级。


```js
var declaration = document.styleSheets[0].cssRules[0].style;
var isImportant = declaration.getPropertyPriority("margin") === "important";
```

规范
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-getpropertypriority |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSStyleDeclaration.getPropertyValue()
======================================

**CSSStyleDeclaration.getPropertyValue()** 接口返回一个 `DOMString` ，其中包含请求的 CSS 属性的值。

语法
--
```

var value = style.getPropertyValue(property);
```

### 参数

* *`property`* 是一个 `DOMString`，是需要查询的 CSS 属性名称。
### 返回值

* `value` 是 `DOMString` ，包含查找属性的值。若对应属性没有设置，则返回空字符串。
示例
--

下述示例使用一个 CSS 选择器规则查询对应的`margin` 属性的值：


```js
var declaration = document.styleSheets[0].cssRules[0].style;
var value = declaration.getPropertyValue("margin"); // "1px 2px"
```

规范
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-getpropertyvalue |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSStyleDeclaration.item()
==========================

`CSSStyleDeclaration.item()` 通过下标从 `CSSStyleDeclaration` 返回一个 CSS 属性值。只要传入参数这个方法就不会抛出异常；当传入的下标越界时会返回空字符串，当未传入参数时会抛出一个 `TypeError` 。

语法
--
```

var propertyName = style.item(index);
```

### 参数

* *`index`* 是需要查找节点的索引，索引下标从零开始。
### Return value

* *`propertyName`* 是一个 `DOMString` ，是在特定索引位置下的属性的名称。

使用以下的 javascript 语法可以通过索引从 style 的节点列表中获取对应值：
```

var propertyName = style[index];
```

范例
--


```js
var style = document.getElementById("div1").style;
var propertyName = style.item(1); // or simply style[1] - returns the second style listed
```

规范
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-item |

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

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

这是一个只读的属性，它返回一个指定元素声明过的样式个数

语法
--
```

var num = styles.length;
```

### 值

指定元素上明确声明过的样式属性个数。

示例
--

获取下面 HTML 元素明确设置过的属性个数：


```html
<div
 id="div1"
 style="margin: 0 10px; background-color: #CA1; font-family: monospace"></div>
```


JavaScript 代码：
```

var myDiv = document.getElementById('div1'); var divStyle = myDiv.style; var len = divStyle.length; // 6
```

规范
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-length |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSStyleDeclaration.setProperty()
=================================

**`CSSStyleDeclaration.setProperty()`** 方法接口为一个声明了 CSS 样式的对象设置一个新的值。

语法
--
```

style.setProperty(propertyName, value, priority);
```

### 参数

* *`propertyName`* 是一个 `DOMString` ，代表被更改的 CSS 属性。
* *`value`*可选 是一个 `DOMString` ，含有新的属性值。如果没有指定，则当作空字符串。
    + 注意：*`value`* 不能包含 `"!important"` --那个应该使用 *`priority`* 参数。
* *`priority`*可选 是一个 `DOMString` 允许设置 "important" CSS 优先级。如果没有指定，则当作空字符串。
### 返回值

* `undefined`
### 异常

* `DOMException` (NoModificationAllowedError)：如果属性或装饰块为只读的，抛出此异常。

JavaScript 有一个特别的，更简单的在 CSSStyleDeclaration 对象上设置 CSS 属性值的语法：
```

style.cssPropertyName = 'value';
```

示例
--

下面的 Javascript 代码为一个选中元素样式的 `margin` 属性设置一个新的值：


```js
var declaration = document.styleSheets[0].rules[0].style;
declaration.setProperty("margin", "1px 2px");
// Equivalent to:
// declaration.margin = '1px 2px';
```

规范
--

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-setproperty |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSStyleDeclaration.removeProperty()
====================================

`CSSStyleDeclaration.removeProperty()` 方法移除 style 对象的一个属性。

语法
--


```js
var oldValue = style.removeProperty(property);
```

### 参数

* *`property`* 是一个 `DOMString` ，代表要移除的属性名。注意由多个单词组成的属性要用连字符连接各个单词，不接收驼峰命名法的形式。
### 返回值

* `oldValue` 是一个 `DOMString` ，等于被移除的属性在移除前的属性值。
### 异常

* `DOMException` NO\_MODIFICATION\_ALLOWED\_ERR: 如果属性或声明块为只读，抛出此异常。
例子
--

下面的 JavaScript 代码从样式表里移除了 `margin` 属性：


```js
var declaration = document.styleSheets[0].rules[0].style;
var oldValue = declaration.removeProperty("margin");
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-removeproperty |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Blob：slice() 方法
===============

`Blob` 接口的 **`slice()`** 方法创建并返回一个新的 `Blob` 对象，该对象包含调用它的 blob 的子集中的数据。

语法
--


```js
slice()
slice(start)
slice(start, end)
slice(start, end, contentType)
```

### 参数

`start` 可选

这个参数代表 `Blob` 里的第一个会被拷贝进新的 `Blob` 的字节的索引。如果你传入的是一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。例如，-10 将会是 `Blob` 的倒数第十个字节。它的默认值是 0。如果你传入的 `start` 的长度大于源 `Blob` 的长度，那么返回的将会是一个长度为 0 并且不包含任何数据的一个 `Blob` 对象。

`end` 可选

这个参数代表 `Blob` 里的第一个*不会*被拷贝进新的 `Blob` 的字节的索引（换句话说，这个索引的字节不会被拷贝）。如果你传入了一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。举例来说，-10 将会是 `Blob` 的倒数第十个字节。它的默认值就是它的原始长度 `size`。

`contentType` 可选

给新的 `Blob` 赋予一个新的内容类型。这将会把它的 `type` 属性设为被传入的值。它的默认值是一个空字符串。

### 返回值

一个新的 `Blob` 对象，它包含了调用该方法的原始 blob 对象所包含数据的指定子集。原始的 blob 不会被改变。

规范
--

| Specification |
| --- |
| File API # dfn-slice |

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

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

参见
--

* `Blob`
* 在 web 应用程序中使用文件
Blob.type
=========

`Blob` 对象的 **`type`** 属性给出文件的 MIME 类型。

值
-

一个包含文件 MIME 类型的字符串，如果无法确定类型则返回空字符串。

**备注：** 基于当前的实现，浏览器不会读取文件的字节流来确定其媒体类型。其根据文件扩展名进行假设；一个被重命名为 .txt 的 PNG 图像文件会返回“*text/plain*”而不是“*image/png*”。此外，`blob.type` 通常只对常见的文件类型（如图像、HTML 文档、音频和视频）有效。不常见的文件扩展名会返回空字符串。客户端配置（例如 Windows 注册表）可能会导致常见类型出现意外值。**开发者不应该仅依赖此属性作为验证方案。**

示例
--

这个示例要求用户选择一些文件，然后检查每个文件以确保其是指定的图片文件类型之一。

### HTML


```html
<input type="file" id="input" multiple />
<output id="output">选择图片文件……</output>
```


```
output {
  display: block;
  margin-top: 16px;
}
```

### JavaScript


```js
// 我们的程序只允许 GIF、PNG 和 JPEG 类型的图片
const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];

const input = document.getElementById("input");
const output = document.getElementById("output");

input.addEventListener("change", (event) => {
  const files = event.target.files;

  if (files.length === 0) {
    output.innerText = "选择图片文件…";
    return;
  }

  const allAllowed = Array.from(files).every((file) =>
    allowedFileTypes.includes(file.type),
  );
  output.innerText = allAllowed ? "所有文件都符合！" : "请只选择图片文件。";
});
```

### 结果

规范
--

| Specification |
| --- |
| File API # dfn-type |

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

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

参见
--

* `Blob`
* 在 web 应用程序中使用文件
Blob.stream()
=============

`Blob` 接口的 **`stream()`** 方法返回一个 `ReadableStream` 对象，读取它将返回包含在 `Blob` 中的数据。

语法
--


```js
stream()
```

### 参数

无。

### 返回值

一个 `ReadableStream` 对象，读取后返回 `Blob` 的内容。

使用说明
----

使用 `stream()` 函数与其返回的 `ReadableStream` 对象，你将得到一些有趣的能力：

* 调用方法 `getReader()`，在返回的 stream 上获取一个对象，通过 `ReadableStreamDefaultReader` 接口提供的 `read()` 方法读取 blob 对象的方法。
* 调用返回 stream 对象的 `pipeTo()` 方法将 blob 对象的数据传输到可写流。
* 调用返回 stream 对象的 `tee()` 方法以准备可读流。该方法会返回一个数组，该数组包含两个新的 `ReadableStream` 对象，每个对象都会返回 `Blob` 的内容。
* 调用返回 stream 对象的 `pipeThrough()` 方法，通过一个 `TransformStream` 对象或其他任意可读可写对传输流对象。
规范
--

| Specification |
| --- |
| File API # dom-blob-stream |

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

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

参见
--

* `Body.body` (en-US)
* Streams API
Blob：Blob() 构造函数
================

**`Blob()`** 构造函数返回一个新的 `Blob` 对象。blob 的内容由参数 `array` 中给出的值串联而成。

语法
--


```js
new Blob(array)
new Blob(array, options)
```

### 参数

`array`

一个可迭代对象，比如 `Array`，包含 `ArrayBuffer`、`TypedArray`、`DataView`、`Blob`、字符串或者任意这些元素的混合，这些元素将会被放入 `Blob` 中。字符串应该是格式良好的 Unicode，而单独代理项（lone surrogate）会使用和 `String.prototype.toWellFormed()` 相同的算法进行清理。

`options` 可选

一个可以指定以下任意属性的对象：

`type` 可选

将会被存储到 blob 中的数据的 MIME 类型。默认值是空字符（`""`）。

`endings` 可选 
非标准

如果数据是文本，那么如何解释其中的换行符（`\n`）。默认值 `transparent` 会将换行符复制到 blob 中而不会改变它们。要将换行符转换为主机系统的本地约定，请指定值 `native`。


### 返回值

一个包含指定数据的新的 `Blob` 对象。

示例
--


```js
const array = ['<q id="a"><span id="b">hey!</span></q>']; // 一个包含单个字符串的数组
const blob = new Blob(array, { type: "text/html" }); // 得到 blob
```

规范
--

| Specification |
| --- |
| File API # constructorBlob |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Blob：arrayBuffer() 方法
=====================

`Blob` 接口的 **`arrayBuffer()`** 方法返回一个 `Promise`，其会兑现一个包含 blob 二进制数据内容的 `ArrayBuffer`。

语法
--


```js
arrayBuffer()
```

### 参数

无。

### 返回值

一个 promise，会兑现为一个包含 blob 数据（以二进制形式）的 `ArrayBuffer`。

### 异常

该方法不会抛出异常，但可能会拒绝返回的 promise。这是可能发生的，例如在用于获取 blob 数据的 reader 抛出异常时。在获取数据时抛出的任何异常都会导致 promise 被拒绝。

使用说明
----

`FileReader.readAsArrayBuffer()` 方法与之类似，但 `arrayBuffer()` 返回一个 promise 对象，而不是像 `FileReader` 接口的方法一样返回一个基于事件的 API。

规范
--

| Specification |
| --- |
| File API # dom-blob-arraybuffer |

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

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

参见
--

* `Response.arrayBuffer()`
* Streams API
* `FileReader.readAsArrayBuffer()`
Blob.size
=========

`Blob` 接口的 **`size`** 属性返回 `Blob` 或 `File` 的字节数。

值
-

`Blob`（或基于 `Blob` 的对象，例如 `File`）所包含数据的字节数。

示例
--

该实例使用 `file` 类型的 `<input>` 元素向用户请求一组文件，然后遍历这些文件，输出它们的名称和大小（以字节为单位）。

### HTML


```html
<input type="file" id="input" multiple />
<output id="output">Choose files…</output>
```


```
output {
  display: block;
  margin-top: 16px;
}
```

### JavaScript


```js
const input = document.getElementById("input");
const output = document.getElementById("output");

input.addEventListener("change", (event) => {
  output.innerText = "";

  for (const file of event.target.files) {
    output.innerText += `${file.name} has a size of ${file.size} bytes.\n`;
  }
});
```

规范
--

| Specification |
| --- |
| File API # dfn-size |

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

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

参见
--

* `Blob`
* 在 web 应用程序中使用文件
Blob：text() 方法
==============

`Blob` 接口的 **`text()`** 方法返回一个 `Promise`，其会兑现一个包含 blob 内容的 UTF-8 格式的字符串。

语法
--


```js
text()
```

### 参数

无。

### 返回值

一个 promise，其会兑现一个包含作为文字字符串的 blob 数据的字符串。数据*总是*被假定为 UTF-8 格式。

使用说明
----

`FileReader` 的 `readAsText()` 方法是一个与之类似的更老的方法，它对 `Blob` 和 `File` 对象都适用。下面是两个主要的不同之处：

* `Blob.text()` 返回一个 promise 对象，而 `FileReader.readAsText()` 是一个基于事件的 API。
* `Blob.text()` 总是使用 UTF-8 进行编码，而 `FileReader.readAsText()` 可以使用不同编码方式，取决于 blob 的类型和一个指定的编码名称。
规范
--

| Specification |
| --- |
| File API # dom-blob-text |

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

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

参见
--

* `Response.text()`
* Streams API
* `FileReader.readAsText()`