javascript - Axios onDownloadProgress 直到传输结束之前才会触发

Question

我正在关注有关构建全栈 MERN 应用程序的教程，其中我试图使用Axios获取 74 个帖子的集合，其中每个帖子都有一个图像，因此总大小约为 16Mb。由于我的网速不佳，我需要几分钟才能下载，所以我尝试通过以下简单方法创建进度指示器：

export const fetchPosts = () => axios.get(url,
{
    onDownloadProgress:  progressEvent => {
        let loadingValue =  Math.floor(progressEvent.loaded / progressEvent.total * 100);
        store.dispatch(updateLoadingValue(loadingValue));
    }
});

对于状态管理，显然我正在使用redux，在redux-thunk的帮助下，您可以在这个动作创建者中看到：

export const getPosts = () => async (dispatch) => {
    try {
        const { data } = await fetchPosts();
        dispatch(
            { type: 'FETCH_ALL', payload: data }
        );
    } catch (error) {
        console.log(error.message);
    }

}

问题是没有调用回调函数，因此加载进度保持为 0%，直到下载过程完成之前，它会快速触发几个具有加载值的连续调用，例如：31% 61% 80% 100%

我在互联网上到处搜索，我想到了使用流或blob而不是json响应类型的想法，但认为这感觉像是想多了（仅 16MB 不是最佳选择）并且我在第一种方法中遗漏了一些东西。
那么是否有可能进行更实时的下载进度更新，或者我应该以不同的方式进行？

标签： javascriptreactjsperformancereduxreact-redux