Baseline Widely available *
Note: This feature is available in Web Workers.
The Response
interface of the Fetch API represents the response to a request.
You can create a new Response
object using the Response()
constructor, but you are more likely to encounter a Response
object being returned as the result of another API operationâfor example, a service worker FetchEvent.respondWith
, or a simple fetch()
.
Response()
Creates a new Response
object.
Response.body
Read only
A ReadableStream
of the body contents.
Response.bodyUsed
Read only
Stores a boolean value that declares whether the body has been used in a response yet.
The Headers
object associated with the response.
Response.ok
Read only
A boolean indicating whether the response was successful (status in the range 200
â 299
) or not.
Response.redirected
Read only
Indicates whether or not the response is the result of a redirect (that is, its URL list has more than one entry).
Response.status
Read only
The status code of the response. (This will be 200
for a success).
Response.statusText
Read only
The status message corresponding to the status code. (e.g., OK
for 200
).
Response.type
Read only
The type of the response (e.g., basic
, cors
).
Response.url
Read only
The URL of the response.
Response.error()
Returns a new Response
object associated with a network error.
Response.redirect()
Returns a new response with a different URL.
Response.json()
Returns a new Response
object for returning the provided JSON encoded data.
Response.arrayBuffer()
Returns a promise that resolves with an ArrayBuffer
representation of the response body.
Response.blob()
Returns a promise that resolves with a Blob
representation of the response body.
Response.bytes()
Returns a promise that resolves with a Uint8Array
representation of the response body.
Response.clone()
Creates a clone of a Response
object.
Response.formData()
Returns a promise that resolves with a FormData
representation of the response body.
Response.json()
Returns a promise that resolves with the result of parsing the response body text as JSON
.
Response.text()
Returns a promise that resolves with a text representation of the response body.
In our basic fetch example (run example live) we use a simple fetch()
call to grab an image and display it in an <img>
element. The fetch()
call returns a promise, which resolves to the Response
object associated with the resource fetch operation.
You'll notice that since we are requesting an image, we need to run Response.blob
to give the response its correct MIME type.
const image = document.querySelector(".my-image");
fetch("flowers.jpg")
.then((response) => response.blob())
.then((blob) => {
const objectURL = URL.createObjectURL(blob);
image.src = objectURL;
});
You can also use the Response()
constructor to create your own custom Response
object:
const response = new Response();
A PHP Call
Here we call a PHP program file that generates a JSON string, displaying the result as a JSON value.
// 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));
Specifications Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3