Question

我是Angular.io的新手，我在处理来自http请求的响应方面遇到了问题。我正在尝试制作简单的登录组件。

我写了简单的服务：

@Injectable()
export class AuthService {
  private url ='http://localhost:3000/user/1';
  constructor(private http: Http){}
  isLoggedIn: boolean = false;
  user : User;
  errorMessage:any;


  login(username:string, password:string) {
 this.getUser(username, password).subscribe((user)=>{
    if(user.login===username && password===user.password){
      this.isLoggedIn=true;
    }
 })
}

  logout(): void {
    this.isLoggedIn = false;
  }

  getUser(username:string, password:string): Observable<User>{
       return (this.http.get(this.url)
            .map(this.extractData)
            .catch(this.handleError))

    }

    private extractData(res: Response){
        let body = res.json();
        return body || {};
    }

    private handleError (error: Response | any) {
    // In a real world app, you might use a remote logging infrastructure
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }
}

和调用此服务的登录组件：

  public Dologin() {
    this.message = 'Trying to log in ...';

  this.authService.login(this.model.username, this.model.password)
  .subscribe(() => {
  this.setMessage();
  if (this.authService.isLoggedIn) {

    let redirect = '/main';

    let navigationExtras: NavigationExtras = {
      preserveQueryParams: true,
      preserveFragment: true
    };

    // Redirect the user
    this.router.navigate([redirect], navigationExtras);
  }
});
 }

正如您所看到的，我已经在auth服务上使用了Observable，因为我需要检查登录名，密码。如何修改我的Dologin方法来调用登录等待查询结束？喜欢订阅，但不再有Observable

Answer 1

首先，不要使用名为$( ".list-group" ).on( "click", "li", function( event ) { event.preventDefault(); console.log( $( this ).text() ); });的类（我在登录字段中出错）。例如，使用User重命名。

您需要在登录功能中使用MyUser代替map并返回subscribe：

Observable<MyUser>

解释：在登录功能中，您可以定义要链接的操作，但这些操作尚未执行。在调用login(username:string, password:string) : Observable<MyUser> { return this.getUser(username, password).map(user => { if(user.login===username && password===user.password){ this.isLoggedIn=true; } return user; }); } getUser(username:string, password:string): Observable<MyUser>{ return (this.http.get(this.url).map((r) => { return r.json() as MyUser; }) .catch(this.handleError)) }时将执行链。

首先，您获取用户（http.get），然后检查登录名/密码。然后，您只需拨打subscribe()一次。

如何处理来自http请求的返回数据

1 个答案: