How to Use the JavaScript Fetch API
Traducciones al EspañolEstamos traduciendo nuestros guías y tutoriales al Español. Es posible que usted esté viendo una traducción generada automáticamente. Estamos trabajando con traductores profesionales para verificar las traducciones de nuestro sitio web. Este proyecto es un trabajo en curso.
The JavaScript Filter API gives you a convenient and native way to make requests and handle responses for HTTP and other network APIs. It provides a built-in function for making GET
, POST
, and other HTTP requests in JavaScript.
This guide explains what the JavaScript Filter API is, what role it plays, and how to start using it.
Before You Begin
This guide assumes you have a basic understanding of JavaScript. Depending on your level of familiarity, you may also want to go further and look at our An Introduction to JavaScript Objects guide.
To follow along with the examples in this guide, you can use your browser’s JavaScript console:
For Chrome, refer to Google’s Run JavaScript in the Console documentation.
For Firefox, refer to Mozilla’s Browser Console documentation.
What Is the JavaScript Fetch API
JavaScript introduced the Fetch API to handle network requests and responses natively. Previously, developers had managed these requests and responses using XMLHttpRequest
. However, that method lacked good integration with JavaScript overall. jQuery stepped up, providing an ajax
function that became a popular substitute.
With the Fetch API, JavaScript enables request and response handling natively, without the need for an external library. This approach also opens up requests and responses to all of the rich features of JavaScript, including promises.
To give you a sense of how the Fetch API works, here is a simple example. The rest of this guide goes into more detail.
const urlToFetchFrom = "https://example.com/";
fetch(urlToFetchFrom)
.then(response => response.json())
.then((data) => {
console.log("Request made, and response received!");
console.log(data);
})
.catch((err) => {
console.log("Error occurred.");
console.log(err);
});
The examples in the sections that follow use the HTTP services provided by httpbin.org. To follow along, navigate to httpbin.org
page and open your browser’s JavaScript console. The example code uses relative URLs, which allow you to execute the requests directly from the page.
How to Make Get Requests With the Fetch API
The Fetch API defaults to GET
requests, making them the most approachable type to start with.
All fetch requests start with the
fetch
function, which takes as an argument the URL to request to.Here, a fetch request is being made to the
/id
endpoint. This endpoint returns the requester’s IP address:fetch("/ip")
The initial response needs to be parsed for JSON data, which can be done using the
then
method. Thethen
method takes the response from the function or method to which it is attached, in this case,fetch
.The
json
method can be applied to the response object to convert the object to a JSON format:.then(response => response.json())
Another
then
method can be attached to the previous one to start handling the JSON response. This is when you can act on the response data.This example reads the
origin
field from the response JSON and prints it in a message on the console log:.then((data) => { console.log("Successful request made from " + data.origin); })
You could, alternatively, create a variable before calling
fetch
, and then assign the response data to that variable in thisthen
method.Using a
catch
method at the end of this chain is good practice. Thecatch
method lets you ensure any error encountered during the request or response process gets handled gracefully.In this case, the
catch
method prints an alert to the console with the error’s information if any error is encountered:.catch((err) => { console.log("An error occurred: " + err); });
The full example is shown below:
fetch("/ip")
.then(response => response.json())
.then((data) => {
console.log("Successful request made from " + data.origin);
})
.catch((err) => {
console.log("An error occurred: " + err);
});
192.0.2.17
How to Make Post Requests with the Fetch API
The Fetch function comes with options for handling POST
, PUT
, and other HTTP methods. These options are specified in an object optionally provided as a second argument to the fetch
function.
This optional object can indicate the request method, headers, and body.
Otherwise, the Fetch API handles similarly for POST
, PUT
, and other methods as for the GET
method seen above.
Create an object for your request body. You do not need to do this separately, but doing so can help to keep your code clear.
This example creates an object with a
test
property holding a string value:let reqData = { test: "This is a test." }
Start the fetch request with the
fetch
function and the request URL.In this example, a
POST
request is being made to the/post
endpoint. This endpoint simply returns the request object:fetch("/post", {
Notice that the above includes the start of a second argument, with a curly brace indicating the beginning of an object. Fill out the object with the method, headers, and body for the request.
Here,
POST
is the method, the headers indicate JSON content and thereqData
variable is provided as the body:method: "POST", headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(reqData) })
Two consecutive
then
methods get applied. The first converts the request’s response to JSON. The second takes that JSON and acts on it.This example simply prints the contents of the
test
field from the response’s JSON data:.then(response => response.json()) .then((data) => { console.log(data.json.test) })
Having a
catch
method is good practice to ensure that any errors in the request or response get handled gracefully.In this case, the
catch
method prints an alert to the console with the error’s information if an error is encountered:.catch((err) => { console.log("An error occurred: " + err); });
The full example is shown below:
let reqData = { test: "This is a test." }
fetch("/post", {
method: "POST",
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(reqData)
})
.then(response => response.json())
.then((data) => {
console.log(data.json.test)
})
.catch((err) => {
console.log("An error occurred: " + err);
});
This is a test.
Conclusion
You now have the know-how you need to start working with JavaScript’s Fetch API. The examples above cover GET
and POST
requests, but the techniques used can be applied to any other HTTP request method as well.
Have more questions or want some help getting started? Feel free to reach out to our Support team.
More Information
You may wish to consult the following resources for additional information on this topic. While these are provided in the hope that they will be useful, please note that we cannot vouch for the accuracy or timeliness of externally hosted materials.
This page was originally published on