角度-可观察性无法正常工作

Question

I have the following code that is not working correct.

I have a service, which offers registration for an user.

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);
  }

The register method is working correct, since the API where I'm registrating the users is returning "success". The problem is when I'm calling it as follows:

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;
    }
  }

I'm also importing the necessary modules:

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

"isRegister" is remaining false and as the result the page is not redirecting to the home page.

Does anyone have an idea where the problem could be?

Thank you in advance!

Answer 1

The isRegistered value will always be false because you are treating an asynchronous operation like a synchronous one. Basically the check if (isRegistered) will run before you have acquired the value from your service. In order to avoid this, you have to move the checks inside of the subscription success callback:

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

In this way you will be sure that isRegistered 's value has been set by the result of the service call.

Your register() function also has a flaw - you will always return an Observable of false . You probably want to return the result of the HTTP request. You should .map() the result of the HTTP response to a Boolean and subscribe when using the service.

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));
}