WebTuts - seomat.com

Your ultimate destination for comprehensive, easy-to-follow web tutorials.

Working with data streams in JavaScript and Axios

Working with data streams in JavaScript is a crucial aspect of handling large amounts of data or continuous data flow efficiently.

In Axios, the onDownloadProgress property allows you to track the progress of a download when making a request. While this property isn't directly intended for handling data streams, it can be used to monitor the progress of a request that involves receiving data in chunks.

This can be useful for displaying progress indicators or performing specific actions based on the download progress. It can be also used to get the data in chunks and to display it on the fly.

Here's an example of how you can utilize onDownloadProgress property with Axios:

axios.get("https://httpbin.org/drip?duration=2&numbytes=20&code=200&delay=0", {
    responseType: "stream",
    onDownloadProgress: (progressEvent) => {
        const { loaded, total, event } = progressEvent;
        if (event.target.status === 200) {
            const percentCompleted = Math.round((loaded * 100) / total);

            console.log(percentCompleted); // progress
            console.log(event.target.response); // data chunk
.then(() => {
    // success
.catch((error) => {
    // error


See the Pen Working with data streams in JavaScript and Axios by Stanescu Eduard-Dan (@ZsharE) on CodePen.