如何 emit/merge RXJS 中的另一个可观察对象 retryWhen
How to emit/merge another observable inside RXJS retryWhen
我有一个针对 api 请求的可观察对象,基本上我在事件连接 failed/error 中添加了 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
中调度另一个动作的最佳方式是什么?或者有其他方法可以实现吗?
您可以使用递归循环,停止条件是尝试次数大于允许的最大尝试次数。然后,您可以将 "retry" 操作的单个可观察对象与补丁可观察对象连接起来。如果您编辑代码段以将 maxAttempts
更改为小于 5 的数字,您将看到正在发出 "failure" 操作。
顺便说一句 - 在触发进行持久更改的 API 调用时,您可能需要仔细检查对 switchMap
的使用。 Here's an article 详细解释了问题。
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>
我有一个针对 api 请求的可观察对象,基本上我在事件连接 failed/error 中添加了 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
中调度另一个动作的最佳方式是什么?或者有其他方法可以实现吗?
您可以使用递归循环,停止条件是尝试次数大于允许的最大尝试次数。然后,您可以将 "retry" 操作的单个可观察对象与补丁可观察对象连接起来。如果您编辑代码段以将 maxAttempts
更改为小于 5 的数字,您将看到正在发出 "failure" 操作。
顺便说一句 - 在触发进行持久更改的 API 调用时,您可能需要仔细检查对 switchMap
的使用。 Here's an article 详细解释了问题。
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>