Skip to content
Related Articles

Related Articles

How to fetch data from APIs using Asynchronous await in ReactJS ?

View Discussion
Improve Article
Save Article
  • Last Updated : 31 Jul, 2022
View Discussion
Improve Article
Save Article

In this article, we are going to make an API request to any APIs that you want using ReactJS, and fetch data using Asynchronous await. Here we are using something called Axios which is a library in ReactJS.

API: APIs are basically a type of application that stored data in the format of JSON (JavaScript Object Notation) and XML (Extensible Markup Language). It makes it possible for any device to talk to each other.

Asynchronous Await: Async ensures that the function returns a promise and wraps non-promises in it. There is another word Await, that works only inside the async function.

Await Syntax:

const Value = await promise;

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install axios

Result:

Project Structure: It will look like the following.

Project Structure

Example:

App.js

 

Note: As an example, we would use the API https://jsonplaceholder.typicode.com/posts/ which would give us random data. Here our goal is to see what is presented in this data. You can replace it with your API and make changes in the div App. If we run https://jsonplaceholder.typicode.com/posts/ API on postman, it will show data in JSON format as shown below:

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!