How to use Axios In ReactJS
For data fetching in React using Axios, you can utilize the Axios library to make HTTP requests easily. Axios provides a simpler and more streamlined syntax compared to the native Fetch API, making it popular for handling data fetching and handling responses in React applications.
Installation command:
npm install axios
Example: This example shows data fetching using axios library.Use you own API to test in place of url.
// App.jsx
import { useEffect, useState } from "react";
import Practice from "./components/Practice";
export default function App() {
return (
<div className="m-2">
<div className="p-2 font-semibold
text-xl bg-slate-100 p-2
text-center max-w-xs
rounded-md m-2 mx-auto">
<h1>API Examples</h1>
</div>
<div>
<Practice />
</div>
</div>
)
}
// components/Practice.jsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
export default function Practice() {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const options = {
method: 'GET',
url: 'your url',
headers: {
'X-RapidAPI-Key': 'Your rapidapi key',
'X-RapidAPI-Host': 'your host name'
}
};
useEffect(() => {
async function getData() {
try {
const response = await axios.request(options);
console.log(response.data.properties.description);
setData(response.data.properties.description[0]);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
}
getData();
}, []);
if (loading) {
return
<p className='font-semibold
flex flex-col text-center
min-h-screen justify-center'>
Loading...
</p>;
}
function renderData() {
return <p>{data}</p>
}
return data && renderData();
}
Output:
axios
Data Fetching Libraries and React Hooks
Data fetching libraries like React Query and React Hooks simplify how developers fetch and manage data in React applications. These tools provide easy-to-use functions like ‘useQuery’ and ‘SWR’ that streamline API interactions and state management, improving code readability and reducing boilerplate.
By using the below libraries, we can create more efficient and responsive user interfaces while handling asynchronous data operations with ease.
Table of Content
- Using built-in Fetch API
- Using Axios
- Using React Query
- Using SWR
- Using GraphQL API
Prerequisites: