Angular 6 - 执行嵌套 .subscribe() "next" 函数时出现问题
Angular 6 - problem executing nested .subscribe() "next" function
我创建了一个带有用户身份验证系统的应用程序。首先,我检查是否存在具有给定注册电子邮件的用户,如果不存在,我会调用注册服务。
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) 请求中。
你不应该订阅内部的 observable,正确的方法是将 observables 组合成一个并订阅它:
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
我创建了一个带有用户身份验证系统的应用程序。首先,我检查是否存在具有给定注册电子邮件的用户,如果不存在,我会调用注册服务。
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) 请求中。
你不应该订阅内部的 observable,正确的方法是将 observables 组合成一个并订阅它:
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