Why JavaScript Developers Should Prefer Axios Over Fetch Betterprogramming. Pub/according to – javascr…
Overview and Syntax
Fetch
Fetch() is part of the JavaScript Window object in the Fetch API. It’s built in, so users don’t have to install it. Fetch() allows us to Fetch data asynchronously from the API without having to install any other libraries.
fetch(url)
.then((res) = > {
// handle response
})
.catch((error) = > {
// handle error
});
Copy the codeThe code above is a simple FETCH () get request. In the fetch() method, there is one mandatory parameter, the URL. A URL is the path from which the user wants to get data. The fetch() method then returns a promise that releases the response object or rejects it for error.
fetch(url, {
method: "POST".headers: {
"Content-Type": "application/json",},body: JSON.stringify(data),
})
.then((response) = > response.json())
.catch((error) = > console.log(error));
Copy the codeThe second argument in the fetch() method is options, which are optional. If the user does not pass in the parameter, the request will always be received and it will download the content from the given URL. As mentioned above, a Promise returns a response object, so the user needs to use another method to get the response body. The user can use several different methods depending on the format of the request body.
response.json()response.text()response.blob()response.formData()response.arrayBuffer()
The most popular is Response.json (). Unfortunately, the built-in fetch() function is not in Node.js, but there is a polyfill function similar to Node-fetch. The fetch() function between the node fetch and the browser takes several different forms.
Axios
Axios is a modern third-party library that can send HTTP requests to Node or XMLHttpRequest or a browser. As a modern library, it is based on the Promise API. Axios has some advantages, such as protection against cross-site request forgery (CSFR) attacks. To be able to use the Axios library, users can install it using CDN, NPM, Yarn, or Bower and import it into your project.
axios.get(url)
.then((response) = > console.log(response))
.catch((error) = > console.log(error));
Copy the codeThe code above is a GET method with a simple callback for responses and errors. When a user creates a configuration object, he can define a bunch of properties. The most common ones are URL, baseURL, Params, Auth, headers, responseType, and data. In response, Axios returns a promise for either a response object or an error object. In the response object, there are the following values:
- Data: indicates the actual response body
- Status: HTTP status code returned, such as 200 or 404
- StatusText: HTTP status as a text message
- Headers: same as request
- Config: requests configuration
- Request: XMLHttpRequest (XHR) object
axios({
url: "http://api.com".method: "POST".header: {
"Content-Type": "application/json",},data: { name: "Sabesan".age: 25}});Copy the codeIn fetch(), the user needs to use two promises in. Users can avoid duplication and write more concise code in Axios.
Axios uses the data attribute, but fetch() uses the body attribute to process the data. The data of fetch() is stringed. In fetch(), the URL is the request parameter, but in Axios, the URL is the configuration object.
JSON format
Fetch
With the fetch() method, the user needs some method to process the response data. When the user sends the request body, the user needs to string the data.
fetch('url')
.then((response) = > response.json())
.then((data) = > console.log(data))
.catch((error) = > console.log(error));
Copy the codeIn the above code, the user needs to use the response data to handle the response.json() operation. When you process JSON data in fetch(), you need to perform two steps. The user needs to send the actual request and then call back the.json() method in the response.
Axios
In Axios, the user passes data in the request or retrieves data from the response, and the data is automatically stringed. Therefore, no additional operations are required.
axios.get('url')
.then((response) = >console.log(response))
.catch((error) = >console.log(error))
Copy the codeIn the example above, you can see that only one THEN needs to be used. Automatically converting data is a nice feature of Axios.
Error handling
Fetch
Every time you get the response data from the fetch() method, you need to check if the state is successful, because even if the state is not successful, you will get the response data. In the case of fetch(), promises are released if and only if the request cannot be completed.
fetch('url')
.then((response) = >{
if(! response.ok){throw Error (response.statusText);
}
return response.json();
})
.then((data) = >console.log(data))
.catch((error) = >console.log(error))
Copy the codeFetch() does not raise a network error. Therefore, the response.ok property must always be checked when fetch() is used. You can extract this error checking into a function to make it easier to reuse.
const checkError = response= > {
if(! response.ok)throw Error(response.statusText);
return response.json();
};
fetch("url")
.then(checkError)
.then(data= > console.log(data))
.catch(error= > console.log("error", error));
Copy the codeAxios
In Axios, error handling is very easy because Axios throws network errors. If an error response 404 is returned, the Promise is rejected and an error is returned. Therefore, you need to catch an error, and then you can check what type of error it is.
axios.get('url')
.then((response) = > console.log(response))
.catch((error) = >{
if(error.response){
// When response status code is out of 2xxx range
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request){
//When no response was received after request was made
console.log(error.request);
} else {
// Error
console.log(error.message); }})Copy the codeDownload progress
Progress indicators are useful for users with slow Internet connections when loading large amounts of resources. In the progress indicators previously implemented. Developers using XMLHttpRequest. Onprogress as a callback handler.
Fetch
In fetch(), to track the download progress, use the ReadableStream object of the Response.body property. It provides the main data piece by piece and allows you to calculate how much data is consumed in a timely manner.
// original code: https://github.com/AnthumChris/fetch-progress-indicators
const element = document.getElementById('progress');
fetch('url')
.then(response= > {
if(! response.ok) {throw Error(response.status+' '+response.statusText)
}
// ensure ReadableStream is supported
if(! response.body) {throw Error('ReadableStream not yet supported in this browser.')}// store the size of the entity-body, in bytes
const contentLength = response.headers.get('content-length');
// ensure contentLength is available
if(! contentLength) {throw Error('Content-Length response header unavailable');
}
// parse the integer into a base-10 number
const total = parseInt(contentLength, 10);
let loaded = 0;
return new Response(
// create and return a readable stream
new ReadableStream({
start(controller) {
const reader = response.body.getReader();
read();
function read() {
reader.read().then(({done, value}) = > {
if (done) {
controller.close();
return;
}
loaded += value.byteLength;
progress({loaded, total})
controller.enqueue(value);
read();
}).catch(error= > {
console.error(error);
controller.error(error)
})
}
}
})
);
})
.then(response= >
// construct a blob from the data
response.blob()
)
.then(data= > {
// insert the downloaded image into the page
document.getElementById('img').src = URL.createObjectURL(data);
})
.catch(error= > {
console.error(error);
})
function progress({loaded, total}) {
element.innerHTML = Math.round(loaded/total*100) +The '%';
}
Copy the codeThe example above demonstrates the use of ReadableStream to provide instant feedback to the user when downloading an image.
Axios
In Axios, progress indicators can also be implemented, and ready-to-use modules can be installed and implemented, so it’s even easier. It’s called the Axios progress bar.
loadProgressBar();
function downloadFile(url) {
axios.get(url, {responseType: 'blob'})
.then(response= > {
const reader = new window.FileReader();
reader.readAsDataURL(response.data);
reader.onload = () = > {
document.getElementById('img').setAttribute('src', reader.result);
}
})
.catch(error= > {
console.log(error)
});
}
Copy the codeUpload progress
Fetch
In fetch(), you cannot monitor the upload progress.
Axios
In Axios, you can monitor upload progress. This can be broken if you are developing an application for video or photo uploads.
const config = {
onUploadProgress: event= > console.log(event.loaded)
};
axios.put("/api", data, config);
Copy the codeIntercept the HTTP
Interception is important to us when you need to inspect or change HTTP requests from applications to servers or listen in other ways (for example, authentication, logging, etc.).
Fetch
Fetch() does not provide HTTP interception by default. You could override the fetch() method and define what needs to happen during the sending of the request, but it would be more expensive and potentially more complex than what you could do with Axios. You can override the global fetch() method and define your own interceptor, as shown in the following code:
fetch = (originalFetch= > {
return (.arguments) = > {
const result = originalFetch.apply(this.arguments);
return result.then(console.log('Request was sent'));
};
})(fetch);
fetch('url')
.then(response= > response.json())
.then(data= > {
console.log(data)
});
Copy the codeAxios
HTTP interception in Axios is one of the main features of the library — that’s why you don’t need to create additional code.
// request interceptors
axios.interceptors.request.use((config) = >{
console.log('Request was sent');
return config;
})
// response interceptors
axios.interceptors.response.use((response) = > {
// do an operation on response
return response;
})
axios.get('url')
.then((response) = >console.log(response))
.catch((error) = >console.log(error))
Copy the codeIn the code above, axios. Interceptors. Request. Use () and axios. Interceptors. Response. Use () method is used to define to run code before sending HTTP requests.
Response timeout
Fetch
Fetch() provides response timeout functionality through the AbortController interface.
const controller = new AbortController();
const signal = controller.signal;
const options = {
method: 'POST'.signal: signal,
body: JSON.stringify({
firstName: 'Sabesan'.lastName: 'Sathananthan'})};const promise = fetch('/login', options);
const timeoutId = setTimeout(() = > controller.abort(), 5000);
promise
.then(response= > {/* handle the response */})
.catch(error= > console.error('timeout exceeded'));
Copy the codeIn the code above, use AbortController AbortController () constructor, you need to create a AbortController object. This object allows you to abort the request later. As I mentioned in my previous article, “Dive into JavaScript’s Fetch API,” we discussed why signal is a property of AbortController, which is read-only. Signal provides a way to communicate with or abort a request. If the server does not respond in less than five seconds, the operation is terminated by calling Controller.abort ().
Axios
By using the optional timeout property in the configuration object, you can set the number of milliseconds before the request terminates.
axios({
method: 'post'.url: '/login'.timeout: 5000.// 5 seconds timeout
data: {
firstName: 'Sabesan'.lastName: 'Sathananthan'
}
})
.then(response= > {/* handle the response */})
.catch(error= > console.error('timeout exceeded'))
Copy the codeOne of the reasons JavaScript developers choose Axios over Axios is that fetch() is easy to set a timeout.
Concurrent requests
Fetch
To make multiple requests at the same time, use the built-in promise.all () method. Simply pass the fetch() request array to promise.all (), and then pass an async function to process the response.
Promise.all([
fetch('https://api.github.com/users/sabesansathananthan'),
fetch('https://api.github.com/users/rcvaram')
])
.then(async([res1, res2]) => {
const a = await res1.json();
const b = await res2.json();
console.log(a.login + ' has ' + a.public_repos + ' public repos on GitHub');
console.log(b.login + ' has ' + b.public_repos + ' public repos on GitHub');
})
.catch(error= > {
console.log(error);
});
Copy the codeAxios
You can use the Axios method axios.all() to get the above results. Pass all the fetched requests as an array to the axios.all() method. Assign the attributes of the response array to individual variables using the axios.spread() function, as shown below:
axios.all([
axios.get('https://api.github.com/users/sabesansathananthan'),
axios.get('https://api.github.com/users/rcvaram')
])
.then(axios.spread((obj1, obj2) = > {
// Both requests are now complete
console.log(obj1.data.login + ' has ' + obj1.data.public_repos + ' public repos on GitHub');
console.log(obj2.data.login + ' has ' + obj2.data.public_repos + ' public repos on GitHub');
}));
Copy the codeBackward compatibility
Backward compatibility is also known as browser compatibility.
Fetch
Fetch() only supports Chrome 42 +, Safari 10.1 +, Firefox 39+ and Edge 14+. The complete compatibility table is available in the Can I Use? Found. To implement a Web browser that fetch() does not support, you can populate Windows.fetch () with methods like fetch() ‘s Polyfill. To use Polyfill, install it using the NPM command:
npm install whatwg-fetch --save
Copy the codeIf the polyfill implementation is needed for some reason, it can be used with an export:
import {fetch as fetchPolyfill} from 'whatwg-fetch'
window.fetch(...) // use native browser version
fetchPolyfill(...) // use polyfill implementation
Copy the codeKeep in mind that on some older browsers, you may also need a Promise polyfill.
Axios
Axios is not like fetch(). Axios provides extensive browser support. Even older browsers like IE11 can run Axios without a problem. The complete compatibility table is available through the Axios documentation.
conclusion
Axios provides an easy-to-use API with an installation package for most HTTP requests. There are also alternative libraries for HTTP communication, such as KY, a small and elegant HTTP client based on window.fetch; Superagent, a small incremental client HTTP request library based on XMLHttpRequest. But Axios is a better solution for applications with a lot of HTTP requests and applications that require good error handling or HTTP interception. Fetch () can be a good solution for small projects with just a few simple API calls.
This article is participating in the “Nuggets 2021 Spring Recruitment Campaign”, click to see the details of the campaign.