What is difference between Axios and Fetch?

by

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.

More Related Contents:

  1. Using JavaScript Axios/Fetch. Can you disable browser cache?
  2. How do I upload a file with the JS fetch API?
  3. Make Axios send cookies in its requests automatically
  4. How can I fetch an array of URLs with Promise.all?
  5. Fetch API request timeout?
  6. Fetch: reject promise and catch the error if status is not OK?
  7. How can I get the status code from an HTTP error in Axios?
  8. How to set state of response from axios in react
  9. try..catch not catching async/await errors
  10. Fetch API vs XMLHttpRequest
  11. fetch gives an empty response body
  12. Access Control Origin Header error using Axios
  13. How to use FormData in react-native?
  14. body data not sent in axios request
  15. redux fetch body is not use with no cors mode
  16. How to handle HTTP code 4xx responses in fetch api
  17. Basic authentication with fetch?
  18. Axios posting params not read by $_POST
  19. React: Axios Network Error
  20. Force download GET request using axios
  21. React cannot read property map of undefined
  22. Why does Fetch API Send the first PUT request as OPTIONS
  23. Returning an Axios Promise from function
  24. How to get the filename from a file downloaded using Javascript Fetch API?
  25. Is it possible to use axios.all with a then() for each promise?
  26. How to post image with fetch?
  27. Axios request giving getter setter methods instead of data queried
  28. FastAPI returns “Error 422: Unprocessable entity” when I send multipart form data with JavaScript Fetch API
  29. Cannot Upload File to FastAPI backend using JavaScript Fetch API in the frontend
  30. How to download a file using ReactJS with Axios in the frontend and FastAPI in the backend?

Leave a Comment