fetch vs axios
// axios
const options = {
url: 'http://localhost/test.htm',
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
data: {
a: 10,
b: 20
}
};
axios(options)
.then(response => {
console.log(response.status);
});
// fetch
const url = 'http://localhost/test.htm';
const options = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
body: JSON.stringify({
a: 10,
b: 20
})
};
fetch(url, options)
.then(response => {
console.log(response.status);
});
Note: Both produces the same result but :
Axios has url in request object. Fetch has no url in request object.
Axios is a stand-alone third party Fetch is built into most modern browsers;
package that can be easily no installation is required as such.
installed.
Axios enjoys built-in XSRF Fetch does not.
protection.
Axios uses the data property. Fetch uses the body property.
Axios’ data contains the object. Fetch’s body has to be stringified.
Axios request is ok when status is Fetch request is ok when response
200 and statusText is ‘OK’. object contains the ok property.
Axios performs automatic transforms Fetch is a two-step process when
of JSON data. handling JSON data- first, to make the
actual request; second, to call the
.json() method on the response.
Axios allows cancelling request and Fetch does not.
request timeout.
Axios has the ability to intercept Fetch, by default, doesn’t provide a
HTTP requests. way to intercept requests.
Axios has built-in support for Fetch does not support upload progress.
download progress.
Axios has wide browser support. Fetch only supports Chrome 42+, Firefox
39+, Edge 14+, and Safari 10.1+
(This is known as Backward
Compatibility).