Angular 6 - 执行嵌套的 .subscribe() "next" 函数时出现问题

Question

我创建了一个带有用户身份验证系统的应用程序。首先，我检查具有给定注册电子邮件的用户是否存在，如果没有 - 我致电注册服务。

register.component.ts

registerUser(email: String, password: String) {
let found = false;
this.authService.findUser(email).pipe(
tap(res => { console.log(res.status);
if (res.status === 202) { found = true; } else if (res.status === 200) { found = false; } else {found = null; }}),
concatMap(res => {
console.log(found);
if (found) {
this.snackBar.open('E-mail already taken.', 'Ok', { duration: 3000 });
} else if (!found) {
this.authService.registerUser(email, password).subscribe(res2 => {
/* CODE DOES NOT EXECUTE - START */
console.log(res2.status);
if (res2.status === 201) {
this.router.navigate(['/list']);
} else {
this.snackBar.open('Unable to add new user.', 'Try later', { duration: 3000 });
}
/* CODE DOES NOT EXECUTE - END*/
});
} else {
this.snackBar.open('Checking e-mail address failed.', 'Try later', { duration: 3000 });
}
return of(res);
})
).subscribe();
}

用户已正确注册，但标记的代码未执行。在AuthService中 - {observe： 'response'} 被添加到 get (findUser( 和 post(registerUser( 请求中。

Answer 1

你不应该订阅内部可观察量，正确的方法是将可观察量组合到一个并订阅它：

registerUser(email: String, password: String) {
this.authService.findUser(email)
.pipe(
flatMap(res => {
let found = null;
if (res.status === 202) {
found = true;
} else if (res.status === 200) {
found = false;
}
console.log(found);
if (found) {
this.snackBar.open('E-mail already taken.', 'Ok', { duration: 3000 });
return of(res);
}
return this.authService.registerUser(email, password);
}),
)
.subscribe(res2 => {
console.log(res2.status);
if (res2.status === 201) {
this.router.navigate(['/list']);
} else {
this.snackBar.open('Unable to add new user.', 'Try later', { duration: 3000 });
}
});
}

请注意，我还简化了您的代码，不需要tap和concatMap。另一件事是found和!found的条件 - 第三个else分支永远无法执行，所以我也删除了它。

https://www.learnrxjs.io/operators/transformation/mergemap.html