如何在RXJS retryWhen中发出/合并另一个可观察的对象

Question

我有一个可观察的for 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内部调度另一个操作的最佳方式是什么？还是有其他方法可以实现这一点？

Answer 1

您可以使用递归循环，停止条件是尝试次数大于允许的最大尝试次数。然后，您可以将您的"重试"操作的一个可观察到的补丁连接起来。如果您编辑代码段以将maxAttempts更改为小于5的数字，您将看到正在发出的"失败"操作。

顺便说一句，当触发进行持久更改的API调用时，您可能需要双重检查switchMap的使用情况。这是一篇详细解释这个问题的文章。

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>