What is difference between Axios and Fetch

Question

I am calling the web service by using fetch but the same I can do with the help of axios  So now I am confused  Should I go for either axios or fetch

User · Answer

Benefits of axios    Transformers  allow performing transforms on data before request is made or after response is received Interceptors  allow you to alter the request or response entirely  headers as well   also perform async operations before request is made or before Promise settles Built-in XSRF protection   Advantages of axios over fetch

User · Answer

Axios is a stand-alone 3rd party package that can be easily installed into a React project using NPM   The other option you mentioned is the fetch function  Unlike Axios  fetch   is built into most modern browsers  With fetch you do not need to install a third party package   So its up to you  you can go with fetch   and potentially mess up if you don t know what you are doing OR just use Axios which is more straightforward in my opinion

User · Answer

With fetch  we need to deal with two promises  With axios  we can directly access the JSON result inside the response object data property

User · Answer

Fetch API  need to deal with two promises to get the response data in JSON Object property  While axios result into JSON object   Also error handling is different in fetch  as it does not handle server side error in the catch block  the Promise returned from fetch   won   t reject on HTTP error status even if the response is an HTTP 404 or 500  Instead  it will resolve normally  with ok status set to false   and it will only reject on network failure or if anything prevented the request from completing  While in axios you can catch all error in catch block    I will say better to use axios  straightforward to handle interceptors  headers config  set cookies and error handling  Refer this

User · Answer

One more major difference between fetch API  amp  axios API   While using service worker  you have to use fetch API only if you want to intercept the HTTP request Ex  While performing caching in PWA using service worker you won t be able to cache if you are using axios API  it works only with fetch API

User · Answer

According to mzabriskie on GitHub      Overall they are very similar  Some benefits of axios          Transformers  allow performing transforms on data before a request is made or after a response is received   Interceptors  allow you to alter the request or response entirely  headers as well   also  perform async operations before a request is   made or before Promise settles   Built-in XSRF protection      please check Browser Support Axios    I think you should use axios

User · Answer

Fetch and Axios are very similar in functionality  but for more backwards compatibility Axios seems to work better  fetch doesn t work in IE 11 for example  check this post   Also  if you work with JSON requests  the following are some differences I stumbled upon with   Fetch JSON post request  let url    https   someurl com   let options                 method   POST               mode   cors               headers                     Accept    application json                    Content-Type    application json charset UTF-8                             body  JSON stringify                   property one  value one                  property two  value two                           let response   await fetch url  options   let responseOK   response  amp  amp  response ok  if  responseOK        let data   await response json           do something with data     Axios JSON post request  let url    https   someurl com   let options                 method   POST               url  url              headers                     Accept    application json                    Content-Type    application json charset UTF-8                             data                    property one  value one                  property two  value two                          let response   await axios options   let responseOK   response  amp  amp  response status     200  amp  amp  response statusText      OK   if  responseOK        let data   await response data         do something with data     So    Fetch s body   Axios  data Fetch s body has to be stringified  Axios  data contains the object Fetch has no url in request object  Axios has url in request object Fetch request function includes the url as parameter  Axios request function does not include the url as parameter  Fetch request is ok when response object contains the ok property  Axios request is ok when status is 200 and statusText is  OK  To get the json object response  in fetch call the json   function on the response object  in Axios get data property of the response object    Hope this helps

User · Answer

They are HTTP request libraries      I end up with the same doubt but the table in this post makes me go with isomorphic-fetch  Which is fetch but works with NodeJS   http   andrewhfarmer com ajax-libraries     The link above is dead The same table is here  https   www javascriptstuff com ajax-libraries   Or here

User · Answer

In addition    I was playing around with various libs in my test and noticed their different handling of 4xx requests  In this case my test returns a json object with a 400 response  This is how 3 popular libs handle the response        request-promise-native const body   request   url  url  json  true    const res   await t throws body   console log res error       node-fetch const body   await fetch url  console log await body json         Axios const body   axios get url  const res   await t throws body   console log res response data    Of interest is that request-promise-native and axios throw on 4xx response while node-fetch doesn t  Also fetch uses a promise for json parsing

User · Answer

A job I do a lot it seems  it s to send forms via ajax  that usually includes an attachment and several input fields  In the more classic workflow  HTML PHP JQuery  I ve used   ajax   in the client and PHP on the server with total success  I ve used axios for dart flutter but now I m learning react for building my web sites  and JQuery doesn t make sense  Problem is axios is giving me some headaches with PHP on the other side  when posting both normal input fields and uploading a file in the same form  I tried   POST and file get contents  quot php   input quot   in PHP  sending from axios with FormData or using a json construct  but I can never get both the file upload and the input fields  On the other hand with Fetch I ve been successful with this code  var formid   e target id      populate FormData var fd      buildFormData formid              post to remote fetch  apiurl php       method   POST     body  fd    headers             Authorization     auth         quot X-Requested-With quot     quot XMLHttpRequest quot              On the PHP side I m able to retrieve the uploads via   FILES and processing the other fields data via   POST     posts         foreach    POST as  post           posts      json decode  post

[ajax] What is difference between Axios and Fetch?

Examples related to ajax

Examples related to reactjs

Examples related to xmlhttprequest

Examples related to es6-promise

Examples related to es6-modules