angular - Angular 错误处理 - catchError 不为 rxjs 效果返回错误对象
问题描述
我一直致力于在 Facebook 等社交媒体网站上创建帖子的错误处理过程。当用户尝试创建帖子,但后端服务器为该进程返回错误时,用户必须看到错误。
如果后端服务器返回错误,则必须触发catchError函数。之后,必须使用 reducer 填充一个称为 PostState 的状态。
如果创建 post 过程失败,并且后端服务器为此过程返回错误,则 PostActionTypes.CreatePostFail情况必须为 postReducer 工作。
PostActionTypes.CreatePostSuccess在有或没有错误的情况下都有效。
我无法使用 Ngrx 效果处理错误过程。
如何使用 Ngrx 效果处理错误过程?
export interface PostState {
showPostId: boolean;
currentPost: Post;
currentPostId: number;
posts: Post[];
commentPost: Post;
isNewPost: boolean;
error: string;
isNewComment: boolean; }
const initialState: PostState = {
showPostId: true,
currentPost: null,
currentPostId: null,
posts: [],
commentPost: null,
isNewPost: false,
error: '',
isNewComment: false };
export function postReducer(state = initialState, action: PostActions): PostState {
switch (action.type) {
case PostActionTypes.CreatePost:
return {
...state,
isNewPost: true
};
case PostActionTypes.CreatePostSuccess:
return {
...state,
posts: [...state.posts, action.payload].sort((a, b) => <any>new Date(b.createdDate) - <any>new Date(a.createdDate)),
error: '',
isNewPost: false
};
case PostActionTypes.CreatePostFail:
return {
...state,
error: action.payload,
isNewPost: false
};
default:
return state;
}
}
这是我的 createPost 服务实现。
createPost(post: any): Observable<Post> {
const headers = new HttpHeaders
({
"Authorization": "Bearer " + this.authService.getToken
});
return this.http.post(this.postUrl + "createpost", post, { headers: headers })
.pipe(
tap((data: any) => { console.log(data) }),
catchError(this.handleError)
); }
这是handleError函数的实现。
private handleError(err: any) {
let errorMessage: string;
if (err.error instanceof ErrorEvent) {
errorMessage = `An error occurred: ${err.error.message}`;
} else {
errorMessage = `Backend returned code ${err.status}: ${err.body.error}`;
}
console.error(err);
return throwError(errorMessage); }
您可以在下面看到 createPost$ 效果实现。
@Effect()
createPost$: Observable<Action> = this.actions$.pipe(
ofType(postActions.PostActionTypes.CreatePost),
map(((action: postActions.CreatePost) => action.payload)),
mergeMap((post: any) =>
this.postService.createPost(post).pipe(
map((newPost: any) => (new postActions.CreatePostSuccess(newPost.result))),
catchError(err => of(new postActions.CreatePostFail(err)))
)
)
);
这是后端服务器错误的示例
如果您想检查该项目,可以在下面查看 Github 存储库。
https://github.com/dogaanismail/DevPlatform/tree/master/DevPlatform.Api/DevPlatformSpa
解决方案
我在不同的帖子中看到了一种类似的方法来捕获错误,它也有同样的问题,即catchError
没有返回操作。我相信这篇文章很好地总结了NgRx Effects 中的错误处理。
TLDR:尝试并在流switchMap
之外捕获错误createPost
@Effect
createPost$: Observable<Action> = this.actions$.pipe(
ofType(postActions.PostActionTypes.CreatePost),
map((action: postActions.CreatePost) => action.payload),
switchMap((post: any) =>
this.postService.createPost(post).pipe(
map((newPost: any) => new postActions.CreatePostSuccess(newPost.result)),
),
catchError(err => (new postActions.CreatePostFail(err)))
)
);
推荐阅读
- devops - 具有多个存储库的 Azure Yaml 管道,基于错误的存储库构建摘要
- javascript - 如何在 WebRTC 中检测冻结的视频流
- android - 如何在 Android 中从图库中选择多个图像
- json - prettier-vscode 被配置为格式化程序,但它无法格式化“Json”文件
- excel - Excel 无法将工作表正确导出为 pdf
- c# - 从 dataGridView 传递日期值时,richTextBox 中的日期格式
- css - SASS:使用相同参数的媒体查询和 id
- substrate - 从 github 构建基板项目时如何找到正确的 rust nightly 版本
- jenkins-pipeline - 无法通过 Jenkins 更改 Jira 的状态,接收无效事件类型:jira:issue_created 错误
- openshift - 安装openstack时出现错误