In building web apps with JavaScript, we may have to send a network request to a server and load new information when needed.
For instance, we can use a network request to
- Submit an order
- Load information, receive updates from a server, etc.
There are numerous ways to send a request and receive information from a server. A recommended approach is to use the Fetch
API, which permit developers to make http
request to web servers for resources needed to build web applications.
In this tutorial, you will learn about the JavaScript Fetch API. By the end of the tutorial, you should be able to use the fetch()
method to fetch for information from a server. Let's get started !
What is the JavaScript Fetch API ?
The JavaScript Fetch API is a modern interface use to fetch for resources from a server. This is achieved by sending an HTTP request to the server from the web browser.
The Fetch API includes a fetch()
method, which starts the process of fetching information from any web server, and working with the information fetched.
Using the fetch()
method, we can receive data from a server, and even post data to the server.
What is the fetch()
method ?
In JavaScript, the
fetch()
method is used to make asynchronous requests to the server and load the information that is returned by the server onto the web pages.
The syntax for the fetch()
method is
fetch(URL, options)
The fetch()
method accepts two arguments:
-
URL
: The URL to access-
options
: An object which consists of additional properties (methods, headers) sent to the server.
-
Without options, we will only be downloading contents of the URL
Fetching for resources
To fetch for some resource, you will call the fetch()
method, and pass it one argument : aURL
(which indicates the path to the resource you want to fetch).
const promise = fetch(url)
The fetch()
method returns a Promise
, which can either be resolved or rejected.
- The promise resolves into a
Response
object. TheResponse
object has a number of useful properties and methods to explore what we got from the request. - The promise
rejects
if thefetch()
method was unable to make the HTTP-request. Rejections can be due to network problems, or if no such URL exits.
We chain the fetch()
method with a then()
and catch()
method to enable us to use the response.
- The
then()
method is basically used to handle asynchronous tasks (tasks that are time-consuming), such as fetching data from an API. When we get a response from thefetch()
method, we will handle the response in thethen()
. - Usually, we get a
Response
object from the fetch request. This object contains useful properties and methods. - If there is an error in fetching the request, for instance due to network problems or invalid URL, the
catch()
method will handle this error.
The complete syntax for fetching information from a server is as below:
fetch(url)
.then(response => {
// handle the response object
})
.catch(error => {
// handle the error
});
Reading the Response
object
The Response
object contains further data that needs to be converted into the required format in order to work with it.
There are several methods you can use to read the body of the response object, one such method is the json()
method.
- The
json()
method returns anotherPromise
that decides the complete data of the fetched resource. - We then access the data in another
.then()
method
Example of fetching and reading data from an API
In the code below, we will fetch a dummy phone product from the dummyjson.com server, and then log the fetched data.
fetch('https://dummyjson.com/products/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));
Steps for fetching and reading data from an API
- Pass the
fetch()
method the requiredurl
to get the data from. In this instance, theURL
will behttps://dummyjson.com/products/1
- Chain the
fetch()
method with thethen()
method - If all goes well, in the
then()
method, we will receive aResponse
object from the server - Extract the JSON body content from the
Response
object using thejson()
method. - The
json()
method will return a secondPromise
. ThisPromise
will resolve to contain the fetched data- Pass this data to another
then()
method.
- Pass this data to another
- In the
then()
method, we can now print the fetched data to the console or assign it to a variable. - If there is an error in fetching the data, the
catch()
method will capture the error, and we can log that error
Example 2: Fetching data from fake store API
In this instance, we will fetch a single ecommerce product from the Fake Store API.
The fake Store API is a free online REST API we will be using to fetch pseudo-real data for our ecommerce website.
- Call the
fetch()
method and pass theurl
or API endpoint as the argument. - The API endpoint or the
url
for this instance is :'https://fakestoreapi.com/products/1'
. It provides access to a single product
fetch('https://fakestoreapi.com/products/1')
- Calling this
fetch()
method returns a special JavaScript object calledPromise
. ThePromise
produces a value (Response
object ) after an asynchronous operation successfully completes, or an error if unsuccessful. - Chain the
fetch()
method with athen()
method to investigate theResponse
object we got from the API call. - The
Response
object is assigned to aresponse
variable. (You can give theResponse
object any variable name of choice,res
orresponse
is the convention) - Use the
json()
method to view the complete content of the fetched resource ( For instanceres.json()
orresponse.json()
depending on how you named your variable)
fetch('https://fakestoreapi.com/products/1').then(response => response.json())
- Finally, access the fetched data by chaining another
.then()
method
fetch('https://fakestoreapi.com/products/1')
.then(
// view the complete content of the response
response => response.json())
.then(
//access the actual data
data => console.log(data))
The output will be an object containing some dummy phone data- title
, price
, description
etc.
{
"id": 1,
"title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
"price": 109.95,
"description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
"category": "men's clothing",
"image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
"rating": {
"rate": 3.9,
"count": 120
}
}
- Instead of logging the output, you can assign this value to declared
variable
, and access the relevant data using the appropriatekey:value
pair.
Handling the status code of the response
In the Response
object, you can use the status
and statusText
properties to access the status code and status text, respectively.
An HTTP status code is a server response to a browser's request. When you visit a website, your browser sends a request to the site's server, and the server then responds to the browser's request with a three-digit code: the HTTP status code.
In the code below, we read the status code and status text from the server's response:
fetch('https://dummyjson.com/products/1')
.then(response => {
console.log(response.status) // check the status code of the response object
console.log(response.statusText) // an interpretation of the code
return response.json() // read the actual data from body of the response object
})
.then(data => console.log(data))
.catch(err => console.error(err));
- A successful request will give a status code of
200
and a status text ofOK
- If the requested URL throws a server error, the status code will be
500
. - If the requested resource does not exist, the status code will be
400
and status text will beNot found
Summary
- The
Fetch API
allows you to reqeust for a resource from a web server - The
Fetch API
provides access to thefetch()
method that returns apromise
which resolves into aResponse
object - Use the
json()
method to fetch the actual data - Use the
status
andstatusText
properties of theResponse
object to investigate the status of the response - Use the
catch()
method to handle a failed request, for instance network problemsn
That's all devs, go ahead and try fetching some data from your favorite APIs.
If you have found this article useful, please share on your social media handles, and follow my blog too. I would love to read your comment and feedback too.
Let's connect on Twitter
Top comments (0)