响应
Response
是 Fetch API 中表示对请求的响应的接口。
您可以使用 Response()
构造函数创建一个新的 Response
对象,但您更有可能遇到作为另一个 API 操作结果返回的 Response
对象,例如,服务工作者 FetchEvent.respondWith
或简单的 fetch()
。
构造函数
Response()
-
创建一个新的
Response
对象。
实例属性
Response.body
只读-
一个
ReadableStream
,用于表示主体内容。 Response.bodyUsed
只读-
存储一个布尔值,用于声明主体是否已在响应中使用过。
Response.headers
只读-
与响应关联的
Headers
对象。 Response.ok
只读-
一个布尔值,用于指示响应是否成功 (状态范围在
200
到299
之间)。 Response.redirected
只读-
指示响应是否为重定向的结果 (即,其 URL 列表包含多个条目)。
Response.status
只读-
响应的状态代码。(对于成功,这将为
200
)。 Response.statusText
只读-
与状态代码对应的状态消息。(例如,
200
的OK
)。 Response.type
只读-
响应的类型 (例如,
basic
、cors
)。 Response.url
只读-
响应的 URL。
静态方法
Response.error()
-
返回一个与网络错误关联的新
Response
对象。 Response.redirect()
-
返回一个具有不同 URL 的新响应。
Response.json()
-
返回一个新的
Response
对象,用于返回提供的 JSON 编码数据。
实例方法
Response.arrayBuffer()
-
返回一个 promise,该 promise 解析为响应主体的
ArrayBuffer
表示形式。 Response.blob()
-
返回一个 promise,该 promise 解析为响应主体的
Blob
表示形式。 Response.bytes()
-
返回一个 promise,该 promise 解析为响应主体的
Uint8Array
表示形式。 Response.clone()
-
创建一个
Response
对象的克隆。 Response.formData()
-
返回一个 promise,该 promise 解析为响应主体的
FormData
表示形式。 Response.json()
-
返回一个 promise,该 promise 解析为将响应主体文本解析为
JSON
的结果。 Response.text()
-
返回一个 promise,该 promise 解析为响应主体的文本表示形式。
示例
获取图像
在我们的 基本获取示例 (运行示例) 中,我们使用简单的 fetch()
调用来获取图像并在 <img>
元素中显示它。fetch()
调用返回一个 promise,该 promise 解析为与资源获取操作关联的 Response
对象。
您会注意到,由于我们正在请求图像,因此我们需要运行 Response.blob
来为响应提供其正确的 MIME 类型。
const image = document.querySelector(".my-image");
fetch("flowers.jpg")
.then((response) => response.blob())
.then((blob) => {
const objectURL = URL.createObjectURL(blob);
image.src = objectURL;
});
您还可以使用 Response()
构造函数创建您自己的自定义 Response
对象
const response = new Response();
PHP 调用
这里,我们调用一个生成 JSON 字符串的 PHP 程序文件,并将结果显示为 JSON 值。
// Function to fetch JSON using PHP
const getJSON = async () => {
// Generate the Response object
const response = await fetch("getJSON.php");
if (response.ok) {
// Get JSON value from the response body
return response.json();
}
throw new Error("*** PHP file not found");
};
// Call the function and output value or error message to console
getJSON()
.then((result) => console.log(result))
.catch((error) => console.error(error));
规范
规范 |
---|
Fetch 标准 # response-class |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。