Как испустить / объединить другой наблюдаемый внутри RX JS retryWhen - PullRequest
Новая
       29

Как испустить / объединить другой наблюдаемый внутри RX JS retryWhen

0 голосов
/ 28 февраля 2020

У меня есть наблюдаемый запрос API, в основном я добавил retryWhen в случае сбоя подключения / ошибки. При этом я хочу отправить другое действие (не уведомлять пользователя, что система повторяет попытку ..), когда запрос выдает ошибку. 

//....
export const saveArticle1 = (action$, state$) =>
  action$.pipe(
    ofType(AUTO_SAVE_ARTICLE_READY),
    withLatestFrom(state$, (a, b) => b),
    switchMap(({
      article,
    }) => {
      const payload = getArticlePayload(article);
      return ajax.patch(`/api/article/${article.id}`, payload, { 'Content-Type': 'application/json' }).pipe(
        flatMap(({ response }) => of({
          type: ARTICLE_AUTO_SAVED,
          value: response,
        })),
        retryWhen(errors =>
          errors.pipe(
            // TODO: I try to concat or merge observable here but no luck
            delay(1000),
            take(60),
          ),
        ),
        catchError((ex) => {
          articleSaveFailureAlert();
          return showErrorNotification('Api Error. Unable to save this article.')(ex);
        }),
      );
    }),
  );

Каков наилучший способ отправить другое действие внутри retryWhen? или есть другой способ добиться этого?

1 Ответ

1 голос
/ 29 февраля 2020

Можно использовать рекурсивную l oop с условием остановки, согласно которому количество попыток превышает максимально допустимое количество попыток. Затем вы можете объединить одну наблюдаемую часть вашего действия «Повторить» с наблюдаемым патчем. Если вы отредактируете фрагмент, чтобы изменить maxAttempts на число ниже 5, вы увидите, что выполняется действие «сбой».

В качестве отступления - вам может потребоваться перепроверить использование switchMap при запуске вызова API, который вносит постоянные изменения. Вот статья , в которой подробно объясняется проблема. 

const {of, operators, throwError, timer, concat} = rxjs;
const {switchMap, catchError, flatMap} = operators;
const maxAttempts = 60;
const patch = (article, attempt) => {
  if (attempt < 5) 
  return throwError(new Error('server unavailable'));
  return of(article);
};
const action$ = of('patch.id');
const saveArticle1 =
  action$.pipe(
    switchMap((article) => {
      const loop = (attempt) => {      
        return patch(article, attempt).pipe(
          flatMap((response) => of({
            type: 'saved',
            value: response,
          })),
          catchError(error => {
            if (attempt > maxAttempts) return of({ type: 'failed' });
          
            return timer(1000).pipe(
              switchMap(() => 
                concat(
                  of({ type: 'retrying' }), 
                  loop(attempt + 1)
                )
              )
            );
          })
        );
      };
      return loop(0);      
    }),
  );
  
saveArticle1.subscribe({
  next: x => console.log('next', x),
  error: e => console.error(e),
  complete: () => console.log('complete')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.4/rxjs.umd.js"></script>
...