DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for 5 steps to make a simple request using Axios in React
lioliveiraz
lioliveiraz

Posted on

5 steps to make a simple request using Axios in React

If you started to develop an application on React, you probably have to connect your front-end with a server. Usually, this communication occurs with an HTTP protocol.

There are many ways to retrieve, post or modify data from a server; you can use Fetch API, XMLHttpRequest or multiple libraries.

Axios is a lightweight NPM library similar to Fetch API, the pack provides an easy way to use REST API and make requests. In this article, I will show in 5 steps how to use Axios in your React application.

1. Install it in your project

We can start by adding Axios to our project. Open your terminal and go to the root of your project β€” where the package.json is β€” Then install the pack.

Alt Text

2.Create a service folder

Once you have Axios install, it is essential to decide which folder the API requests will be. Separating your request is a good way to keep your code clean and refactored.

Alt Text

3. Build your function

In this next step, we will finally start to write some code. First, import the library on the top of your JavaScript file.

import axios from 'axios'

Now you can start to write your function. Remember to choose a name that makes sense of what do you expect from this function.

function fetchFilmsApi (){
} 
Enter fullscreen mode Exit fullscreen mode

Axios is promise-based; for this reason, we can make use of async and wait to create nice and asynchronous code. We will transform our function in an async function and create a variable to store the response of our request.

async function fetchFilmsApi (){
 const response = await axios.get(insertUrl)// insert the API url
} 
Enter fullscreen mode Exit fullscreen mode

Now we have to create a return that provides us with the data of our response. Do not forget to export your function!

export default async function fetchFilmsApi (){
 const response = await axios.get(insertUrl)// insert the API url
 return  response.data

} 
Enter fullscreen mode Exit fullscreen mode

4.Import the function

Our function is done, now we have to build our main component β€” where the data will be used. There we will import our API function.

import fetchFilmsApi from "../../services/api"

5. Handle the response

Once we have our HTTP request done, Axios will return for us a promise with a successful or failure response. To handle the result, we will use two methods then() and catch().

 getData =()=> {
        this.fetchFilmsApi().then().catch()
    }

Enter fullscreen mode Exit fullscreen mode

If the response is fulfilled, then() will be called and inside the method, we will decide what to do with the data. In our case, we are assigning it to a state.

 getData =()=> {
        this.fetchFilmsApi().then(res=> this.setState({data:res}).catch()
    }

Enter fullscreen mode Exit fullscreen mode

In case the promise is not fulfilled, catch() will be called. We can log the response to understand which errors are happening.

 getData =()=> {
        this.fetchFilmsApi().then(res=> this.setState({data:res}).catch(err=> console.log(`Something went wrong. ERROR: ${err}Β΄))
    }
Enter fullscreen mode Exit fullscreen mode

Wrapping up

As you could see, for a simple request Axios take less time and effort to retrieve data, besides that, the library is supported for old browsers and transform JSON data in its background. There are many other aspects that I didn`t discuss, and you can check it all in Axios GitHub page .

Top comments (1)

Collapse
hrrarya profile image
Hridoy Mozumder

Cool!!

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.