Working with data streams in JavaScript and Axios

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
})

Demo

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