Published on

Fetch vs Axios

tailwindcss logo



Axios has url in request object. Fetch has no url in request object. Axios is a stand-alone third party package that can be easily installed. Fetch is built into most modern browsers; no installation is required as such.

The Fetch API

  • In web applications, fetch is a standard method for sending asynchronous API calls to the server. It is an ECMASCRIPT6(ES6) feature that was introduced in 2015.

  • The Fetch API includes a fetch () method that is defined on the window object. It requires an argument, which is the endpoint's URL (resource). This method returns a promise that is resolved in order to obtain the response.

Example For Fetch API:

const options = {
    // the method type
    method : 'POST',
    // contents to send i.e., the body
    body: JSON.stringify({name : 'David', id:"1"}

// options will be used if the request is other than GET

const makeRequest = () => {
  fetch('your server api url', options)
    .then((res) => res.json()) // successful req, change to json
    .then((data) => {
      console.log(data) // data contains the json object
    .catch((error) => {
      console.log(error) // something went wrong


  • Axios is a node.js and browser-based promise-based HTTP client. It is isomorphic (meaning it can run in both the browser and nodejs using the same codebase).

  • It uses the native node.js http module on the server, and XMLHttpRequests on the client (browser).

  • Installation

npm i axios

Example For Axios Using The Async/Await:

import axios from 'axios'

const makeCall = async () => {
  try {
    const response = await axios.get('http://localhost:5000') // for GET method
    const response = await'http://localhost:5000', data) // for POST method
  } catch (error) {

Example For Axios Using Promise:

import axios from 'axios'

const makeCall = async () => {
  try {
    return axios
      .then((data) => data)
      .catch((error) => console.log(error)) // for GET method
  } catch (error) {

Note: The data is an object or a formdata to be sent to the server.

const data = {
  name: 'Humed',
  age: '26',
  email: '',

What is the difference between fetch and axios?

Axios is a stand-alone third party package (library) which requires installationFetch is built-in for most modern web browsers, so no installation is required
Has request-timeouts for cancelling requestsCannot abort requests
It has XSRF protection in-builtIt doesn't have XSRF (cross-site request forgery) protection
Request has data which contains the object itselfRequest has body which is converted to string


Thank you for sticking with me this far even if the article was very short 😁, I hope this was helpful.

Happy coding 🎉!