使用 redux-observable 和 rxjs 6 获取新的访问令牌并重试操作？答案

【问题标题】：Get a new access token and retry action using redux-observable and rxjs 6?使用 redux-observable 和 rxjs 6 获取新的访问令牌并重试操作？
【发布时间】：2019-10-02 18:09:00
【问题描述】：

我是 rxjs 和 redux-observable 的新手，我面临以下问题：

在史诗中，我请求了一些东西，但我得到了 401，因为我当前的 access_token 已过期。所以我需要得到一个新的，然后重试请求。为此，我使用存储的refresh_token。我找到了一个似乎适用于 rxjs 版本 5.x 的解决方案，我正在尝试使用版本 6 来实现它，但我可能遗漏了一些东西并且操作永远不会完成：

我提出了请求，但由于 401 而失败。然后，我设法请求新的access_token，我得到了新的access_token，但就是这样，正在监听调用源的流永远不会执行。

我已尝试对此进行调整：rxjs - How to retry after catching and processing an error with emitting something 这是用 rxjs 的 5.x 版本实现的

这是我正在写的史诗：

export const fetchItems= (action$: any) => action$.pipe(
  ofType(ActionTypes.REQUEST_ITEMS),
  switchMap((action: any) => {
    return request('get', '/items', '', true);
  }),
  map((response: any) => successResponse(response.data)),
  catchError((error: AxiosError, source: any) => {
    if (isError401(error) {
      return action$.pipe(
        ofType(ActionTypes.SUCCESS_REFRESH_TOKEN),
        takeUntil(action$.ofType(ActionTypes.FAILURE_REFRESH_TOKEN)),
        take(1),
        mergeMapTo(source),
        merge(
          of(requestRefreshToken())
        )
      );
    } else {
      return failureResponse(error);
    }
  })
);

我知道我有一些 any 不应该在那里，并且我没有提供太多背景信息来帮助我，但也许你可以告诉我在哪里寻找的线索问题。

从我之前展示的链接中，我没有使用Observable.defer() 部分，但我想这不是问题所在。无论如何，我也不知道如何使用 rxjs 6 来实现该部分。

在我的 redux 开发工具中，我看到了以下操作：

REQUEST_ITEMS
REQUEST_REFRESH_TOKEN (this is the request of a new access_token passing the current refresh_token)
SUCCESS_REFRESH_TOKEN (this means that I've got a new access_token stored)

在这之后，我期待mergeMapTo(source) 会再次触发 REQUEST_ITEMS（并且有一个新的有效access_token 可以完成该操作，这次落入successResponse(response.data)），但它永远不会被触发。

【问题讨论】：

标签： reactjs rxjs rxjs6 redux-observable

【解决方案1】：

如果有人需要知道这个问题的答案，原来是我使用了错误的catchError。如此处所述：RxJs Observables: run retryWhen after some more async requests

另外，我必须用 rxjs 提供的 ajax 替换 axios（我用于 http 请求）。

工作代码是这样的：

export const fetchItems = (action$: any, store: any) => action$.pipe(
  ofType(ActionTypes.REQUEST_ITEMS),
  mergeMap((action: any) => {
    return defer(() => {
        const access_token = store.value.data.auth.access_token;
        const options = {
          headers: {
            Authorization: `Bearer ${access_token}`,
          },
          url: '/items',
        };
        return ajax(options);
      })
      .pipe(
        map((response: any) => successItems(response.response)),
        catchError((error: any, source: any) => {
          if (isError401(error)) {
            return action$.pipe(
              ofType(ActionTypes.SUCCESS_REFRESH_TOKEN),
              takeUntil(action$.ofType(ActionTypes.FAILURE_REFRESH_TOKEN)),
              take(1),
              mergeMapTo(source),
              merge(
                of(requestRefreshToken())
              ),
            );
          } else {
            return of(failureItems(error));
          }
        })
      );
  })
);

【讨论】：