Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is difference between Axios and Fetch?

Tags:

axios

fetch

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?

like image 784
Gorakh Nath Avatar asked Nov 28 '16 12:11

Gorakh Nath


People also ask

Should I learn fetch or Axios?

Axios is best suited in terms of the transformation of data as it transforms data of JSON automatically whereas fetch requires two steps for the transformation of JSON data. If you want to transform JSON data using the Fetch API, then first you have to make a request then in response, a JSON function is called.

Why JavaScript developers should prefer Axios over fetch?

By using the optional timeout property in the config object, you can set the number of milliseconds before the request is terminated. One of the reasons that JavaScript developers choose Axios rather than fetch() is the ease of setting timeout.

Is Axios a fetch wrapper?

The Axios API, as an 800 byte Fetch wrapper.

What are Axios for?

Axios is a promise based HTTP client for the browser and Node. js. Axios makes it easy to send asynchronous HTTP requests to REST endpoints and perform CRUD operations. It can be used in plain JavaScript or with a library such as Vue or React.


1 Answers

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 && 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 && response.status === 200 && 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.
like image 93
c-chavez Avatar answered Sep 24 '22 16:09

c-chavez