This content originally appeared on DEV Community and was authored by Sundar Joseph
Fetch API provides a JavaScript interface for making HTTP requests and processing the responses.
Fetch is the modern replacement for XMLHttpRequest: unlike XMLHttpRequest, which uses callbacks, Fetch is promise-based and is integrated with features of the modern web such as service workers and Cross-Origin Resource Sharing (CORS).
With the Fetch API, you make a request by calling fetch(), which is available as a global function in both window and worker contexts. You pass it a Request object or a string containing the URL to fetch, along with an optional argument to configure the request.
The fetch() function returns a Promise which is fulfilled with a Response object representing the server's response. You can then check the request status and extract the body of the response in various formats, including text and JSON, by calling the appropriate method on the response.
Here's a minimal function that uses fetch() to retrieve some JSON data from a server:
js
Copy to Clipboard
async function getData() {
const url = "https://example.org/products.json";
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(Response status: ${response.status});
}
const json = await response.json();
console.log(json);
} catch (error) {
console.error(error.message);
}
}
We declare a string containing the URL and then call fetch(), passing the URL with no extra options.
The fetch() function will reject the promise on some errors, but not if the server responds with an error status like 404: so we also check the response status and throw if it is not OK.
Otherwise, we fetch the response body content as JSON by calling the json() method of Response, and log one of its values. Note that like fetch() itself, json() is asynchronous, as are all the other methods to access the response body content.
In the rest of this page we'll look in more detail at the different stages of this process.
Making a request
To make a request, call fetch(), passing in:
a definition of the resource to fetch. This can be any one of:
a string containing the URL
an object, such as an instance of URL, which has a stringifier that produces a string containing the URL
a Request instance
optionally, an object containing options to configure the request.
In this section we'll look at some of the most commonly-used options. To read about all the options that can be given, see the fetch() reference page.
Setting the method
By default, fetch() makes a GET request, but you can use the method option to use a different request method:
js
Copy to Clipboard
const response = await fetch("https://example.org/post", {
method: "POST",
// …
});
If the mode option is set to no-cors, then method must be one of GET, POST or HEAD.
Setting a body
The request body is the payload of the request: it's the thing the client is sending to the server. You cannot include a body with GET requests, but it's useful for requests that send content to the server, such as POST or PUT requests. For example, if you want to upload a file to the server, you might make a POST request and include the file as the request body.
To set a request body, pass it as the body option:
js
Copy to Clipboard
const response = await fetch("https://example.org/post", {
method: "POST",
body: JSON.stringify({ username: "example" }),
// …
});
This content originally appeared on DEV Community and was authored by Sundar Joseph
Sundar Joseph | Sciencx (2025-07-01T16:20:11+00:00) Using the Fetch API. Retrieved from https://www.scien.cx/2025/07/01/using-the-fetch-api/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.