Axios - rvdegroen/notes GitHub Wiki

Table of Contents

What is 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)

What are the differences between fetch and Axios?

This video explain some differences between Axios and fetch that I will talk about:

  1. 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;
}

  1. 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])

  2. 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.

  3. If an API throws an error like a 404 or a 500, Axios is able to throw an error too, while fetch won't.

Why did I use Axios?

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.

How did I use Axios?

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;
};

  1. 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.

  2. Secondly I made an async function to fetch the data of villagers from the API (baseURL) with my axiosInstance and the method .get.

  3. Thirdly I returned the response of my .data that is automatically turned into a JSON format by Axios.

Sources

sources: