Adios Axios: Migrate from axios to ky

Since nodejs explode the community that extend function of javascript. Fetch is common function that used in many case in javascript, it’s used to do request to external resource (e.g API) and parse the response to desire format, like JSON or text.

Axios

Axios is the most popular library used in browser because long ago it solve many problem in frontend development to grab data from external resources. This is example code of axios.

import axios from 'axios';

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

There is nothing wrong with axios, you still can use it as usual. Axios created at 2014, at that time the problem front-end face is no standard way to grab data from external resources, so axios use their own way to do request, parse and anything. I really appreciate their hard work and make frontend development become easy at that time.

Fetch: The modern standard

Fetch become standard of javascript to handle request and parse the response. As we can see at MDN Page, it created at 2017, 3 years after axios realease. Here is example of fetch code, you do not need to install any library because it already available in almost all browser and server side (nodejs, bun, and deno) also.

const url = "https://example.org/products.json";
try {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`Response status: ${response.status}`);
  }

  const json = await response.json();
  console.log(json);
} catch (error) {
  console.error(error.message);
}

Because of this availability, size of website javascript should be smaller.

Adios Axios

Axios was a godsend back when JavaScript was still a mess. But those days are over. The standard Fetch API is now available in all major platforms. Thanks for everything Axios, but it is time to say goodbye.

Adios, Axios 👋

Adios-axios is a website, not just a website, but as a message to any developer out there. Our browser become modern and many tools are provided for our convenience. You can read more reason why axios should not become your option for handling request.

Introducing Library Ky

Using fetch function alone may become tidious because it’s a functional programming, we should craft request format every time do request, it’s also do not support interceptor just like axios do. But, the foundation is solid, we can do more by enhance it into another derivatives.

Let me introduce you, Library ky. It’s a library that help you craft a request, call hooks before and after request, and do more. You can read more at their library documentation.

import ky from 'ky';

const api = ky.extend({
	hooks: {
		beforeRequest: [
			request => {
				request.headers.set('Authorization', 'Bearer ' + localstorage.getItem('token'));
			}
		]
	}
});

const response = await api.get('https://example.com/api/users');

ky allow us to create instance of request, the most common usecase is embed authentication token to header authorization. It’s easy to use and convenience. You can also add hooks AFTER the request, example of the use case is handle error, do refresh token, etc.

Use Axios if…

If you create code or website just for old computer that use old browser, older than 2017. I would recommend you to use axios instead because older browser do not have fetch function. It’s more convenience to use library axios instead do request manually.

Conclusion

Axios is the great library at their time, when the browser do not have standard to do request. But, nowdays modern browser already have fetch function to do request to external resources with better in every aspect. I would recommend you to use fetch or ky library to do request into external resources. Thanks for your reading, feel free to leave comment!