Angular中Observable工作异常，注册后无法跳转页面求助

我来帮你拆解下代码里的问题，主要有两个核心点导致你遇到的现象：

1. 服务中register方法的逻辑错误 #

你在服务的register方法里直接订阅了HTTP请求，并且不管请求结果如何，方法最后都会立刻返回Observable.of(false)。这里的问题在于：

• HTTP请求是异步操作，subscribe里的回调要等请求完成后才会执行，但你的方法会在发起请求后马上返回最后的false Observable，完全忽略了请求的实际结果。
• 你在subscribe回调里写的return Observable.of(true)/return Observable.of(false)根本不会改变方法的返回值——这些return是在回调函数内部的，和外层的register方法返回值无关。

修正后的服务代码 #

我们应该让register方法返回HTTP请求的Observable本身，用操作符来处理结果，而不是在服务内部订阅：

// 注意：如果是RxJS 6+版本，需要导入这些操作符和of
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

register(firstname: string, lastname: string, email: string, password: string): Observable<boolean> { 
  // 对象属性简写，让代码更简洁
  let body = {firstname, lastname, email, password}; 
  return this.http.post(this.base_url + "api/register/user/", body) 
    .pipe(
      // 成功时判断状态，返回布尔值
      map((data: any) => data.status === 'success'),
      // 出错时直接返回false
      catchError(() => of(false))
    );
}

2. 调用方registerUser的异步逻辑处理错误 #

你在registerUser里先定义了isRegistered = false，然后订阅服务的方法，紧接着就同步判断isRegistered的值。这里的问题是：
Observable的subscribe回调是异步执行的——也就是说，订阅后不会立刻触发回调，要等HTTP请求完成后才会把结果赋值给isRegistered。但你在订阅后马上就执行if(isRegistered)，这时候isRegistered还是初始的false，所以永远会进入else分支。

修正后的调用代码 #

把页面跳转、日志打印这些逻辑放到subscribe的回调内部，确保只有当请求完成并拿到结果后才执行：

registerUser(e) { 
  // ... 你的其他代码，比如获取表单里的firstname、lastname等变量
  this.userService.register(firstname, lastname, email, password).subscribe(registerSuccess => {
    if(registerSuccess) { 
      console.log("isRegistered = true"); 
      this.router.navigate(['/home']); 
    } else { 
      console.log("isRegistered = false"); 
    }
  });
  // 这里不要同步返回true/false，因为异步操作还没完成，返回的值没有意义
}

总结 #

• 服务层的职责是封装异步操作并返回Observable，由调用方决定如何处理订阅后的结果，不要在服务内部订阅。
• 所有依赖异步操作结果的逻辑，必须放到subscribe的回调（或者用async/await结合toPromise）里，不能在外部同步判断。

内容的提问来源于stack exchange，提问作者UrmLmn