
- Software Engineer, Product
- Modern Technology stacks:
- So What is a Tech Stack?
- Frontend tech stack
- Backend tech stack
- How to choose/build a tech stack
- What is a CI/CD Pipeline?
- Software Business Analyst
- Node.js Express Back-end Overview
- Build React App With Java Backend
- Connecting React-Frontend and NodeJS/Express Backend Applications
- React-Frontend, Node.js/Express-Backend, MySQL Architecture
- React Frontend with a NodeJS/Express Backend SQL-Architecture
- So What is git ?
- Git vs GitHub
- Big O Notation


How to Fetch Data from an API Using the Axios API in JavaScript

How to make HTTP requests with Axios ?
Axios is a client HTTP API based on the
With the npm CLI:
With the yarn CLI:
This sends an HTTP GET request from React to the npm api to search for
all react packages using the query
so it can be displayed in the
This sends the same GET request from React using axios, but this version uses
React hooks from a function component instead of lifecycle methods from a traditional
React class component. The
React hook replaces the
The second parameter to the
Example React hooks component
This sends the same GET request from React using axios, but this version uses an
Example React component
This sends a GET request from React using axios to an invalid
url on the npm api then assigns the error message to the
Example React component
This sends the same GET request again from React using axios with a couple of headers set,
the HTTP
Example React component
- If the request is successful, response.data will contain the data returned by the API.
- You can then process and use this data as needed.
- If an error occurs, the catch block will be executed and you can log the error or take appropriate actions.
.....Simple GET Request Using Fetch ...Tusaale
HttpXMLRequest
interface provided by browsers.
Installing axios from npm
With the npm CLI: npm install axios
With the yarn CLI:
yarn add axios

Simple GET request using axios
This sends an HTTP GET request from React to the npm api to search for
all react packages using the query q=react
,
then assigns the total
returned in the response to
the component state property totalReactPackages
so it can be displayed in the
render()
method.
GET request using axios with React hooks
This sends the same GET request from React using axios, but this version uses
React hooks from a function component instead of lifecycle methods from a traditional
React class component. The useEffect
React hook replaces the
componentDidMount
lifecycle method to make the HTTP GET request when the component loads.The second parameter to the
useEffect
React hook is an array of dependencies that determines when the hook is run,
passing an empty array causes the hook to only be run once when the component first loads,
like the componentDidMount
lifecyle method in a class component.
For more info on React hooks see https://reactjs.org/docs/hooks-intro.html.

GET request using axios with async/await
This sends the same GET request from React using axios, but this version uses an async
function and the await
javascript expression to wait for
the promises to return (instead of using the promise then()
method as above). 
GET request using axios with error handling
This sends a GET request from React using axios to an invalid
url on the npm api then assigns the error message to the errorMessage
component state property and logs the error to the console.
GET request using axios with set HTTP headers
This sends the same GET request again from React using axios with a couple of headers set,
the HTTP Authorization
header and a custom header My-Custom-Header


Explanation:
Import Axios:
-Start by importing the Axios library.Make the Request:
- Use axios.get() to send a GET request to your API endpoint. Replace https://api.example.com/data with the actual URL of your API.Handle the Response:
- Use await to make the function asynchronous and wait for the response.- If the request is successful, response.data will contain the data returned by the API.
- You can then process and use this data as needed.
Handle Errors:
- Use a try...catch block to handle potential errors during the request.- If an error occurs, the catch block will be executed and you can log the error or take appropriate actions.
.....Simple GET Request Using Fetch ...Tusaale

Isu-Barbardhiga Axios vs Fetch oo dhanmaystiran
Full-Stack Engineer
