각도 2 : 나는 Angular2에서 HTTP 서비스를 사용하고 HTTP를 비동기 호출

Question

:

내 로그인 구성 요소 :

doLogin() { 
     this.authenticationService.inValidateSession();  
this.authenticationService.userConfiguration=this.httpService.login(this.user.email,this.user.password) 
     this.router.navigate(['/site']); 

    } 

• 사용자가 무효로 이전 세션 (있는 경우)를 dologin, 자격 증명을 제출하면.
• 은 서버 로그인을
• 을 할 것입니다 그리고 그것은 이름과 그룹 같은 서버에서 얻을 것이다 사용자 설정을 저장합니다 ... 을 _ 그리고 홈페이지를 기본값으로 리디렉션합니다. HttpService를

  login(username:string,password:string) { 
      let headers = new Headers(); 
      this.createAuthorizationHeader(headers,username,password); 
      this.http.get(this.url,{headers:headers}).subscribe(this.extractData,this.handleError); 
      return this.configFromLogin; 
  } 
  
  private extractData(res: Response) { 
      if(res.status==200){ 
      let body = res.json(); 
      var result={"config":body, 
         "x-xsrf-token":res.headers.get('x-xsrf-token')}; 
      this.configFromLogin=result; 
      } 
      else{ 
      //console.log(error); 
      // throw exception or use this.error() method 
      } 
  } 
  

  서버는 우리가 모든 POST 요청에 사용할 필요가 토큰 인증을 제공하기 때문에

, 내가 세션에 저장합니다.

내 문제 또는 의심 : 내가 doLogin을 디버깅 할 때

1. () 코드가 실행 얻을 첫번째 (saveInSession)도 HttpService를 extractData 전에 실행됩니다. 왜? 내가 HTTP get 비동기 호출을 알고 있지만 어떻게 doLogin 기다릴 수 있습니다 ?
2. HttpService에서 응답이 200이면 나는 그것을 저장하고 있는지 확인하고 있습니다. 그렇지 않으면 오류가 발생하고 HandleError 메서드 인 Observable의 구독 메서드 인 을 사용하고 싶습니다. 가능한가?

위의 두 가지 문제로 도움을 받으십시오. 답변을 구할 수있는 경우입니다.

감사

Answer 1

당신의 문제는 HTTP 요청이 router.navigate를 호출하기 전에 완료 될 때까지 기다려야하지 않는다는 것입니다.

서비스는 호출 구성 요소에 요청이 완료되었고 모든 것이 탐색하기 좋은지 알려주기 위해 관찰 가능을 리턴해야합니다.

로그인 구성 요소

doLogin() { 
     this.authenticationService.inValidateSession();  
     this.httpService.login(this.user.email,this.user.password).subscribe(result => { 
      this.authenticationService.userConfiguration=result; 
      this.router.navigate(['/site']); 
     }, 
     error => { 
      console.error(error); 
     }); 
    } 

HttpService를

login(username:string,password:string):Observable<any> { 
    let headers = new Headers(); 
    this.createAuthorizationHeader(headers,username,password); 

    //We will return the http observable, mapped with our auth function 
    return this.http.get(this.url,{headers:headers}) 
    .map(this.extractData);//We bind the authentication process on the observable 
} 

private extractData(res: Response) { 
    if(res.status !== 200){ 
     throw new Error('Not a 200, bla bla details'); 
    } 
    let body = res.json(); 
    var result={"config":body, 
       "x-xsrf-token":res.headers.get('x-xsrf-token')}; 
    return result; 
} 

편집 : 나는 당신에 의해 사로 잡았됩니다 오류가 발생 할 수는 extractData 방법에 throw 추가 rxjs이고 onError 매개 변수로 처리됩니다. f subscribe.