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

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

如您所见，我已经在身份验证服务上使用 Observable，因为我需要检查登录名和密码。现在如何修改我的 Dologin 方法来调用登录等待查询结束？喜欢 subscribe 但没有 Observable 了

Answer 1

首先，不要使用名为 User 的 class（我的登录字段出现错误）。例如用 MyUser 重命名。

您需要在登录函数中使用 map 而不是 subscribe 并且 return 和 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))

}

说明：在登录函数中，您定义了要链接的操作，但这些操作尚未执行。当 subscribe() 被调用时链将被执行。

首先，您获取用户 (http.get)，然后检查 login/password。然后，您只调用 subscribe() 一次。

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

How to handle returned data from http request

angular2-observables

angular