-
Notifications
You must be signed in to change notification settings - Fork 0
Axios
According to the documentation of Axios, Axios is a third party library that is "a promise-based HTTP Client for node.js and the browser". It's isomorphic, which means that it can run in the browser and in node.js with the same codebase: "on the server-side it uses native code node.js http
, while on the client (browser) it uses XMLHttpRequests."
The library has several features:
- Make XMLHttpRequests from the browser (XHR objects are used to interact with the servers)
- Make HTTP requests from node.js
- Supports the promise API
- Intercept requests and response
- Transform request and response data
- Cancel requests
- Automatic transforms for JSON data
- Client side support for protecting against XSRF (unauthorized commands are submitted from a user that the web app trusts)
This video explain some differences between Axios and fetch that I will talk about:
- With Axios you call Axios and provide the desired HTTP requests. Axios will automatically return the result as JSON. With fetch, you need to turn into a json format manually.
In code, the difference looks like this:
// fetching villagers data with fetch()
const fetchVillagers = async () => {
const response = await fetch("https://acnhapi.com/v1a/villagers/");
const data = await response.json();
return data;
}
// fetching villagers data with Axios
const fetchVillagers = async () => {
const response = await axios.get("https://acnhapi.com/v1a/villagers/");
return response.data;
}
-
You can pre-configure Axios with the "Axios Instance" to use a speciic "baseURL" or some specific "header", which eliminates some borderplate of your application. You can create a new instance of Axios with the syntax:
axios.create([config])
. You use these in combination with instance methods like:axios.get(url[config])
-
Axios supports interceptors, which are functions that Axios calls for every request or response. This is useful for error handling situations and it would be good to use a
try() catch()
block. -
If an API throws an error like a 404 or a 500, Axios is able to throw an error too, while fetch won't.
I used Axios, because I wanted to try it out and one of the requirments of this project is to use at least one library or framework and utilize this in a useful manner.
First I installed Axios in my project with npm install axios
.
I used Axios to fetch my ACNH API, like so:
export const axiosInstance = axios.create({
baseURL: "https://acnhapi.com/v1a",
});
export const fetchVillagers = async () => {
const response = await axiosInstance.get("/villagers");
return response.data;
};
-
First I created an Axios instance, so I can re-use my base URL. This would be more useful if I could've used it more.
-
Secondly I made an async function to fetch the data of villagers from the API (baseURL) with my axiosInstance and the method
.get
. -
Thirdly I returned the response of my
.data
that is automatically turned into a JSON format by Axios.
sources:
- https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
- https://en.wikipedia.org/wiki/Cross-site_request_forgery
- https://axios-http.com/docs/intro
- https://www.youtube.com/watch?v=j284YeATTAI
- https://axios-http.com/docs/instance
- https://stackoverflow.com/questions/48980380/returning-data-from-axios-api
- Vite ✔✔
- React ✔✔
- D3.js ✔✔
- LottieFiles ✔✔
- Lodash ✔✔
- Date fns ✔✔
- Javascript Cookie ✔✔
- Jwt Decode ✔✔
- Tailwind ✔✔
- GSAP✔✔
- Axios✔✔
- Animatie ✔
- Kleur ✔
- Gradients ✔
- Vormpjes maken ✔
- Filters ✔
- Application Optimization✔✔
- Compress Assets✔✔
- Sass ✔✔
- Gulp ✔✔
- Fonts-Optimization ✔✔
- Vercel ✔✔
- Campspace ✔✔
- Deanna Bosschert ✔✔
- Cyd Stumpel ✔✔
- Aaron Gustafson ✔✔
- Niels Leenheer ✔✔
- Hidde de Vries ✔✔
- Chanel Mepschen
- Servin ✔✔
- Brian Bawuah ✔✔
- Kilian Valkhof ✔✔
- Extra Notes
- NXT Museum | Foreign Nature
- dialogs & modals, three.js,
- Cas Obdamn ✔✔
- Wimer Hazenberg ✔✔
- Roos Verkade ✔✔
- Kilian Valkhof ✔✔