ajax - ReactJS Redux RxJS AJAX 加载指示器

Question

我有一个 ReactJS 和 Redux 应用程序，并使用 RxJS 进行异步 AJAX 取消和错误处理。我用来连接 Redux 和 RxJS 的中间件（用于 Redux）是 redux-observable。

我正在向服务器发出请求，该服务器也处理错误和取消，这是史诗：

const RecipesEpic = action$ =>
action$.ofType(FETCH_RECIPES)
    .mergeMap(action => {
        return Observable.ajax({
            method: "get",
            url: url
        })
            .map(payload => {
                return ({ type: FETCH_RECIPES_FULFILLED, payload })
            })
            .catch(error => Observable.of({
                type: FETCH_RECIPES_REJECTED,
                payload: error
            }))
            .takeUntil(action$.ofType(FETCH_RECIPES_CANCELLED))
    })

export default RecipesEpic

我正在尝试实现一个加载指示器，首先我想向控制台记录请求完成的百分比（通过使用 XHR2），然后我将实现 UI。简单来说：如何在 RxJS DOM Request 中实现 XHR2 下载进度？

我没有在网上找到任何关于这个问题的资源，希望其他正在搜索这个问题的人能有答案。

谢谢！

Answer 1

根据The RxJS Ajax Documentation，您可以progressObserver 在 Observable.ajax 调用中提供一个。您提供的 Observer 将更新 XHR2 下载进度！