Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

zh-cn(update): update fetch #11295

Merged
merged 4 commits into from
Jan 29, 2023
Merged
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 27 additions & 20 deletions files/zh-cn/web/api/fetch_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,57 +5,64 @@ slug: Web/API/Fetch_API

{{DefaultAPISidebar("Fetch API")}}

Fetch API 提供了一个获取资源的接口(包括跨域请求)。任何使用过 {{domxref("XMLHttpRequest")}} 的人都能轻松上手,而且新的 API 提供了更强大和灵活的功能集。
Fetch API 提供了一个获取资源的接口(包括跨网络通信)。对于任何使用过 {{domxref("XMLHttpRequest")}} 的人都能轻松上手,而且新的 API 提供了更强大和灵活的功能集。

{{AvailableInWorkers}}

## 概念和用法

Fetch 提供了对 {{domxref("Request")}} 和 {{domxref("Response")}} (以及其他与网络请求有关的)对象的通用定义。使之今后可以被使用到更多地应用场景中:无论是 service worker、Cache API、又或者是其他处理请求和响应的方式,甚至是任何一种需要你自己在程序中生成响应的方式。
Fetch 提供了对 {{domxref("Request")}} 和 {{domxref("Response")}}(以及其它与网络请求有关的)对象的通用定义。这将在未来更多需要它们的地方使用它们,无论是 service worker、Cache API,又或者是其它处理请求和响应的方式,甚至是任何一种需要你自己在程序中生成响应的方式(即使用计算机程序或者个人编程指令)。

它同时还为有关联性的概念,例如 CORS 和 HTTP Origin 标头信息,提供一种新的定义,取代它们原来那种分离的定义。

发送请求或者获取资源,请使用 {{domxref("fetch()")}} 方法。它在很多接口中都被实现了,更具体地说,是在 {{domxref("Window")}} 和 {{domxref("WorkerGlobalScope")}} 接口上。因此在几乎所有环境中都可以用这个方法获取资源。

`fetch()` 强制接受一个参数,即要获取的资源的路径。它返回一个 {{JSxRef("Promise")}},该 Promise 会在服务器使用标头响应后,兑现为该请求的 {{domxref("Response")}}——**即使服务器的响应是 HTTP 错误状态**。你也可以传一个可选的第二个参数 `init`(参见 {{domxref("Request")}})。

它同时还为有关联性的概念,例如 CORS 和 HTTP 原生头信息,提供一种新的定义,取代它们原来那种分离的定义
一旦 {{domxref("Response")}} 被返回,有许多方法可以获取主体定义的内容以及如何处理它

发送请求或者获取资源,需要使用 {{domxref("fetch()")}} 方法。它在很多接口中都被实现了,更具体地说,是在 {{domxref("Window")}} {{domxref("WorkerGlobalScope")}} 接口上。因此在几乎所有环境中都可以用这个方法获取到资源
你也可以通过 {{domxref("Request.Request","Request()")}} {{domxref("Response.Response","Response()")}} 构造函数直接创建请求和响应。但是我们不建议这么做,它们更可能被创建为其它的 API 操作的结果(比如,service worker 中的 {{domxref("FetchEvent.respondWith")}}

`fetch()` 必须接受一个参数——资源的路径。无论请求成功与否,它都返回一个 Promise 对象,resolve 对应请求的 {{domxref("Response")}}。你也可以传一个可选的第二个参数 `init`(参见 {{domxref("Request")}})。
### 与 jQuery 的区别

一旦 {{domxref("Response")}} 被返回,就可以使用一些方法来定义内容的形式,以及应当如何处理内容(参见 {{domxref("Body")}})。
`fetch` 规范主要在三个方面与 `jQuery.ajax()` 不同:

你也可以通过 {{domxref("Request.Request","Request()")}} 和 {{domxref("Response.Response","Response()")}} 的构造函数直接创建请求和响应,但是我们不建议这么做。他们应该被用于创建其他 API 的结果(比如,service workers 中的 {{domxref("FetchEvent.respondWith")}})。
- 从 `fetch()` 返回的 Promise **不会因 HTTP 的错误状态而被拒绝**,即使响应是 HTTP `404` 或 `500`。相反,它将正常兑现(`ok` 状态会被设置为 `false`),并且只有在网络故障或者有任何阻止请求完成时,才拒绝。
- 除非你在 [init 对象中](/zh-CN/docs/Web/API/fetch#参数)设置(去包含)*credentials*,否则 `fetch()` **将不会发送跨源 cookie**。

> **备注:** 更多关于 Fetch API 的用法,参考 [Using Fetch](/zh-CN/docs/Web/API/Fetch_API/Using_Fetch),以及一些概念 [Fetch basic concepts](/zh-CN/docs/Web/API/Fetch_API/Basic_concepts)。
- [2018 年 4 月](https://github.com/whatwg/fetch/pull/585),该规范将默认的 credentials 策略更改为 `'same-origin'`。以下浏览器发布了过时的原生 fetch,并在以下版本中更新:Firefox 61.0b13、Safari 12、Chrome 68。
- 如果你的目标时这些旧的浏览器,请务必在所有可能接受 cookie/用户登录状态影响的 API 请求中包含拥有 `credentials: 'same-origin'` 的 [init 对象](/zh-CN/docs/Web/API/fetch#参数)。

> **备注:** 更多关于 Fetch API 的用法,参考[使用 Fetch](/zh-CN/docs/Web/API/Fetch_API/Using_Fetch),以及一些概念 [Fetch 基础概念](/zh-CN/docs/Web/API/Fetch_API/Basic_concepts)。

### 中止 fetch

浏览器已经开始为 {{domxref("AbortController")}} 和 {{domxref("AbortSignal")}} 接口(也就是 Abort API)添加实验性支持,允许像 Fetch 和 XHR 这样的操作在还未完成时被中止。请参阅接口页面了解更多详情
要中止未完成的 `fetch()`,甚至 `XMLHttpRequest` 操作,请使用 {{DOMxRef("AbortController")}} 和 {{DOMxRef("AbortSignal")}} 接口。

## Fetch 接口

- {{domxref("fetch()")}}
- : 包含了`fetch()` 方法,用于获取资源。
yin1999 marked this conversation as resolved.
Show resolved Hide resolved
- {{domxref("Headers")}}
- : 相当于 response/request 的头信息,可以使你查询到这些头信息,或者针对不同的结果做不同的操作。
- : 表示响应/请求的标头信息,允许你查询它们,或者针对不同的结果做不同的操作。
- {{domxref("Request")}}
- : 相当于一个资源请求。
- {{domxref("Response")}}
- : 相当于请求的响应

## Fetch mixin

- {{domxref("Body")}}
- : 提供了与 response/request 中的 body 有关的方法,可以定义它的内容形式以及处理方式。

## 规范

{{Specifications}}

## 浏览器兼容
## 浏览器兼容性

{{Compat}}

## 相关链接
## 参见

- [Using Fetch](/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)
- [使用 Fetch](/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)
- [ServiceWorker API](/zh-CN/docs/Web/API/ServiceWorker_API)
- [HTTP access control (CORS)](/zh-CN/docs/Web/HTTP/Access_control_CORS)
- [HTTP 访问控制(CORS](/zh-CN/docs/Web/HTTP/Access_control_CORS)
yin1999 marked this conversation as resolved.
Show resolved Hide resolved
- [HTTP](/zh-CN/docs/Web/HTTP)
- [Fetch polyfill](https://github.com/github/fetch)
- [Fetch basic concepts](/zh-CN/docs/Web/API/Fetch_API/Basic_concepts)
- [Fetch 基础概念](/zh-CN/docs/Web/API/Fetch_API/Basic_concepts)