Response
Baseline 广泛可用 *
注意:此功能在 Web Workers 中可用。
Web API 的 Response 接口代表对请求的响应。
你可以使用 Response() 构造函数创建一个新的 Response 对象,但你更有可能遇到 Response 对象作为另一个 API 操作的结果返回——例如,Service Worker 的 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()-
返回一个用于返回提供的 JSON 编码数据的新的
Response对象。
实例方法
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 示例(实时运行示例)中,我们使用一个简单的 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 |
浏览器兼容性
加载中…