What is Axios?
Axios is a JavaScript library used to make HTTP requests. In a React application, it is commonly used to communicate with APIs and backend servers. Through Axios, a React application can send requests to a server and receive data from it.
For example, a React application may need to get a list of movies from an API, send a new user to a backend, update existing data, or delete a record. Axios provides methods such as get(), post(), put(), patch(), and delete() for these operations.
The basic flow can be understood as:
React Application
↓
Axios
↓
HTTP Request
↓
API
↓
HTTP Response
↓
Axios
↓
React Application
Axios itself is not a database and does not permanently store the data. Its main responsibility is communication between the application and the server.
Installing Axios
Axios can be installed in a React project using:
npm install axios
After installing it, import Axios into the component or JavaScript file where it is required:
import axios from "axios";
Now Axios methods can be used to communicate with APIs.
Axios GET Request
The GET method is used when we want to retrieve data from a server.
const response = await axios.get("https://example.com/users");
console.log(response.data);
Axios returns a response object that contains information such as the response data, status, and headers. The actual data returned by the server is normally accessed using response.data.
For example, if the API returns an array of users:
[
{
id: 1,
name: "John"
},
{
id: 2,
name: "David"
}
]
then response.data contains this array.
Using GET in React
When data needs to be fetched when a component loads, Axios is commonly used inside useEffect().
import { useEffect, useState } from "react";
import axios from "axios";
function App() {
const [users, setUsers] = useState([]);
useEffect(() => {
const getUsers = async () => {
const response = await axios.get(
"https://example.com/users"
);
setUsers(response.data);
};
getUsers();
}, []);
return (
<div>
{users.map((user) => (
<div key={user.id}>
<h2>{user.name}</h2>
</div>
))}
</div>
);
}
Initially, users is an empty array. The component renders, and then the effect runs. Axios sends the GET request. After the server responds, setUsers() updates the state. React then re-renders the component, and map() creates the UI for each user.
The flow is:
Component renders
↓
useEffect runs
↓
Axios sends GET request
↓
Server sends response
↓
response.data
↓
setUsers()
↓
React re-renders
↓
map() creates UI
Mapping API Data in React
APIs frequently return an array of objects. React can use the JavaScript map() method to convert every object into JSX.
Suppose the API returns:
[
{
imdbID: "tt001",
Title: "Avatar"
},
{
imdbID: "tt002",
Title: "Titanic"
}
]
It can be displayed like this:
<ul>
{movie.map((x) => (
<li key={x.imdbID}>
<h1>{x.Title}</h1>
</li>
))}
</ul>
Here, map() goes through the array one object at a time. During each iteration, x represents the current movie object.
For the first object:
x = {
imdbID: "tt001",
Title: "Avatar"
}
Therefore:
x.imdbID
gives "tt001" and:
x.Title
gives "Avatar".
The same process happens for every object in the array.
The key helps React identify each item in the list. A unique identifier from the API, such as imdbID, is generally preferable to using the array index.
Axios POST Request
The POST method is generally used to send data to a server, often to create a new resource.
The first argument is the URL, and the second argument is the data that should be sent to the server.
The basic structure is:
axios.post(url, data);
For example, when a user submits a form in React, the form data can be sent using Axios:
const addUser = async () => {
const user = {
name: "John",
age: 22
};
const response = await axios.post(
"https://example.com/users",
user
);
console.log(response.data);
};
Dynamic GET Requests
The URL of a GET request can also be created based on user input.
For example:
const username = "john";
const response = await axios.get(
`https://example.com/users/${username}`
);
The resulting URL is:
https://example.com/users/john
Template literals are useful for creating dynamic URLs.
Axios also supports query parameters through the params option:
const response = await axios.get(
"https://example.com/movies",
{
params: {
name: "Avatar"
}
}
);
This produces a request containing a query parameter such as:
https://example.com/movies?name=Avatar
Using params is often cleaner than manually constructing a long query string.
Other Axios Methods
Axios supports the common HTTP methods used for CRUD operations.
CREATE → POST
READ → GET
UPDATE → PUT / PATCH
DELETE → DELETE
For example:
axios.get("/users");
axios.post("/users", user);
axios.put("/users/10", user);
axios.patch("/users/10", { name: "David" });
axios.delete("/users/10");
PUT is generally used to replace or update a resource, while PATCH is generally used for a partial update.
Error Handling
HTTP requests can fail for many reasons. The server may be unavailable, the URL may be incorrect, the user may not be authorized, or the network connection may fail.
Axios requests can be handled using try...catch:
try {
const response = await axios.get(url);
console.log(response.data);
} catch (error) {
console.log(error);
}
Headers
Some APIs require additional information in the request. This information can be sent using HTTP headers.
For example:
axios.get(url, {
headers: {
Authorization: `Bearer ${token}`
}
});
Headers are often used for authentication and other request metadata.
For a POST request, Axios can receive the request data and configuration separately:
axios.post(
url,
userData,
{
headers: {
Authorization: `Bearer ${token}`
}
}
);
The three arguments are:
URL
↓
Data
↓
Configuration
Axios Instances
In larger applications, the same API base URL may be used repeatedly. Instead of writing the complete URL every time, an Axios instance can be created.
const api = axios.create({
baseURL: "https://example.com/api"
});
Now requests can be written as:
api.get("/users");
api.post("/users", user);
This makes API-related code easier to organize and maintain.
Top comments (0)