Muhammad Ibrahiem
Jun 29 · 3 min read

In this tutorial, you will learn how to fetch API and consume it in javascript, Reactjs, and tools.

The API consists of headers and body. The headers have information like authorization, the method. The body has the content you need to send to API. All APIs have headers, but it isn’t necessary to have a body. The API may have headers and body in request and headers and body for response.

There are some basic methods of APIs. The back-end developer creates API and tells the client how to use it

1. Tools

There are chrome extensions used to consume APIs like Restlet Client and Postman. Postman has a native version you can use it. We will use Restlet Client chrome extensions because it is very easy, but it hasn’t all features on Postman.

1.1. Restlet Client

Go to chrome web store and install this extension. After adding extension open it by click on its icon R. it opens a new tab. Make a new account in this tool or use without an account.

To make GET method in this tool choose the method and put the URL of API and click on send button. There are no headers need.

The POST method by the same way but change method to POST and the extensions show body text to write to the body

2. Javascript

There are two approaches to consume API in javascript. The First approach used then method and the second approach async and await.

2.1 Then

fetch('API URL Here')   
.then(indicator) // response => response.json()
.then(indicator) // json => console.log(json)

Firstly, you should know the URL of the API and know what is content you send in API headers and body. In the next example, we consume API from Jsonplaceholder website. We write the URL in the fetch function. By using then to get the response and convert it json. Using another then for print the output on the console. Why using then? because of the fetch function returns a promise and first then return another promise so we used second then

fetch('https://jsonplaceholder.typicode.com/users')   
.then(response => response.json())
.then(json => console.log(json))

The output of the previous example is 10 users as an array. Each user is between two curly braces ‘{ }’ in square brackets ‘[ ]’

[{id: 1 ,name: "Leanne Graham" ,
username: "Bret" ,email: "Sincere@april.biz" ,
address: {...} ,phone: "1-770-736-8031 x56442" ,
website: "hildegard.org" ,company: {...}}, {}, {}, ...]

We use response.json() if the returned value returns json.

You can add headers of RESTful APIs to use authentication and methods. If the API uses json web token ( JWT ) Authentication, you will follow the next example

fetch('API URL Here',{
method : 'GET',
headers : {
'Authorizarion' : 'Bearer {Token Here}'
}
}) //token without '{}'
.then(indicator)
.then(indicator)

2.2. Async … Await

We use the above examples to apply with async and await. Await isn’t used in the global scope so you should create a new function in javascript with async and await. We will create a new function fetchAPI() and call it.

async function fetchAPI(){
let response = await fetch('https://jsonplaceholder.typicode.com/users')
let json = await response.json()
console.log(json)
}
fetchAPI()

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Muhammad Ibrahiem

Written by

I’m an android, Front-End and Back-End developer.I have 4 android apps on google play. I have been published 2 books on amazon.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade