Window: fetch() 方法
Baseline 广泛可用 *
Window 接口的 fetch() 方法开始从网络获取资源的过程，返回一个在响应可用时兑现的 Promise。
此 Promise 解析为表示对你的请求的 Response 对象。
fetch() 的 Promise 仅在请求失败时才会被拒绝，例如，由于请求 URL 格式不正确或网络错误。如果服务器响应的 HTTP 状态码表示错误（404、504 等），fetch() 的 Promise 不会 被拒绝。相反，then() 处理程序必须检查 Response.ok 和/或 Response.status 属性。
fetch() 方法受内容安全策略 (Content Security Policy) 的 connect-src 指令控制，而不是它所检索资源的指令。
注意： fetch() 方法的参数与 Request() 构造函数的参数相同。
语法
fetch(resource)
fetch(resource, options)
参数
resource-
这定义了你希望获取的资源。这可以是
- 一个字符串或任何其他带有字符串化器（包括
URL对象）的对象，它提供你想要获取的资源的 URL。URL 可以是相对于基 URL 的，基 URL 在窗口上下文中是文档的baseURI，在工作器上下文中是WorkerGlobalScope.location。 - 一个
Request对象。
- 一个字符串或任何其他带有字符串化器（包括
options可选-
一个
RequestInit对象，其中包含你希望应用于请求的任何自定义设置。
返回值
一个解析为 Response 对象的 Promise。
异常
AbortErrorDOMException-
由于调用了
AbortController的abort()方法，请求被中止。 NotAllowedErrorDOMException-
如果通过
browsing-topics权限策略明确禁止使用 Topics API，并且使用browsingTopics: true发出了fetch()请求，则抛出此错误。 TypeError-
可能由于以下原因发生
- 请求的 URL 无效。
- 请求的 URL 包含凭据（用户名和密码）。
- 作为
options值传递的RequestInit对象包含具有无效值的属性。 - 请求被权限策略阻止。
- 存在网络错误（例如，因为设备没有连接）。
示例
在我们的 Fetch Request 示例（请参阅 Fetch Request live）中，我们使用相关构造函数创建一个新的 Request 对象，然后使用 fetch() 调用来获取它。由于我们正在获取图像，我们对响应运行 Response.blob() 以使其具有正确的 MIME 类型，以便正确处理，然后创建它的对象 URL 并在
const myImage = document.querySelector("img");
const myRequest = new Request("flowers.jpg");
window
.fetch(myRequest)
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.blob();
})
.then((response) => {
myImage.src = URL.createObjectURL(response);
});
在我们的带 init 的 Fetch Request 示例（请参阅 Fetch Request init live）中，我们做了同样的事情，只是我们在调用 fetch() 时传递了一个 *options* 对象。在这种情况下，我们可以设置一个 Cache-Control 值来指示我们可接受的缓存响应类型
const myImage = document.querySelector("img");
const reqHeaders = new Headers();
// A cached response is okay unless it's more than a week old
reqHeaders.set("Cache-Control", "max-age=604800");
const options = {
headers: reqHeaders,
};
// Pass init as an "options" object with our headers.
const req = new Request("flowers.jpg", options);
fetch(req).then((response) => {
// …
});
你也可以在 Request 构造函数中传入 init 对象以达到相同的效果
const req = new Request("flowers.jpg", options);
你也可以使用对象字面量作为 init 中的 headers
const options = {
headers: {
"Cache-Control": "max-age=60480",
},
};
const req = new Request("flowers.jpg", options);
使用 fetch 文章提供了更多使用 fetch() 的示例。
规范
| 规范 |
|---|
| Fetch # fetch-method |
浏览器兼容性
加载中…