Fetch vs Axios

Introduction

• The Fetch API
• Example For Fetch API:
• Axios
• Example For Axios Using The Async/Await:
• Example For Axios Using Promise:
• Conclusion

Introduction

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

• 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 axios.post('http://localhost:5000', data) // for POST method
  } catch (error) {
    console.log(error)
  }
}

Example For Axios Using Promise:

import axios from 'axios'

const makeCall = async () => {
  try {
    return axios
      .get('http://localhost:5000')
      .then((data) => data)
      .catch((error) => console.log(error)) // for GET method
  } catch (error) {
    console.log(error)
  }
}

const data = {
  name: 'Humed',
  age: '26',
  email: 'humed@gmail.com',
}

What is the difference between fetch and axios?

Conclusion

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

Happy coding 🎉!