javascript - Angular - Observable 无法正常工作

Question

我的以下代码无法正常工作。

我有一个为用户提供注册的服务。

register(firstname: string, lastname: string, email: string, password: string): Observable<boolean> {
    let body = {firstname: firstname, lastname: lastname, email: email, password: password};
    
    this.http.post(this.base_url + "api/register/user/", body)
    .subscribe(
        (data) => {
            if((data as any).status == 'success') {
                return Observable.of(true);
            }
        },
        (error) => {
           return Observable.of(false);
    });
    return Observable.of(false);
  }

注册方法工作正常，因为我注册用户的 API 返回“成功”。问题是当我按如下方式调用它时:

registerUser(e) {
    
    ...
    
    let isRegistered = false;
    
    this.userService.register(firstname, lastname, email, password).subscribe(register => isRegistered = register);
    
    
    if(isRegistered) {
        console.log("isRegistered = true");
        this.router.navigate(['/home']);
        return true;
    } else {
        console.log("isRegistered = false");
        return false;
    }
  }

我还导入了必要的模块:

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';

“isRegister”仍然为 false，因此页面不会重定向到主页。

有人知道问题出在哪里吗？

提前致谢!

Answer 1

isRegistered 值将始终为 false，因为您将异步操作视为同步操作。基本上，检查 if (isRegistered) 将在您从服务中获取值之前运行。为了避免这种情况，您必须将检查移到订阅成功回调中:

this.userService
  .register(firstname, lastname, email, password)
  .subscribe(isRegistered => {
    if (isRegistered) {
      this.router.navigate(["/home"]);
      return true;
    } else {
      return false;
    }
  });

通过这种方式，您将确保 isRegistered 的值已由服务调用的结果设置。

您的 register() 函数也有一个缺陷 - 您将始终返回 false 的 Observable。您可能想要返回 HTTP 请求的结果。您应该将 .map() HTTP 响应的结果作为 Boolean 并在使用该服务时订阅。

register(firstname: string, lastname: string, email: string, password: string): Observable<boolean> {
  const body = { firstname, lastname, email, password };

  return this.http.post(this.base_url + 'api/register/user/', body)
    .map(data => {
        if((data as any).status === 'success') {
            return Observable.of(true);
        } else {
            return Observable.of(false);
        }
    })
    .catch(() => Observable.of(false));
}