Angular 5 HttpClient가 값을 가지고 돌아 오기 전에

Question

저는 Angular로 작업하기 시작했습니다. 아주 간단한 질문이 있습니다.

나는 ngx-rocket 도구를 통해 만든 this 스타터 프로젝트를 사용하고 있으며 내 webapi를 사용하여 인증을 구현하려고합니다. 나는이 서비스 (see original code)에 대해 이야기하고있다.

HTTP 모듈로서 새로운 것을 사용 중입니다 (import { HttpClient } from '@angular/common/http';). 나는 이것에 위의 서비스의 login 방법을 변경 :

login(context: LoginContext): Observable<Credentials> { 

    return this._http.post<Credentials>("/api/account/login", 
     {Email : context.username,Password:context.password});   
    } 

HTTP 요청이 발생하고 성공적으로 반환합니다. 내 문제 : 당신도 볼 수 있듯이 this.setCredentials(data, context.remember);을 사용하여 자격 증명을 설정해야합니다. 나에게 혼란스러운 것은 관찰 할 수있는 것을 반환하고 동일한 방법으로 자격 증명을 설정하는 방법입니다. 반환 된 관찰 가능 변수를 유지하고, 그것을 구독하고, 데이터를 설정 한 다음 반환하지만 데이터를 설정하기 전에 반환합니다 (비동기임을 알고 있음).

이것은 내게 혼란 스럽지만, Angular에서는 꽤 기본이지만 여전히 혼란 스럽습니다. 적절한 반환을 제공하고 자격 증명을 설정하기 위해이 방법을 어떻게 변경할 수 있습니까? 어떤 도움

Answer 1

에 대한

덕분에 당신은 lettable tap (이전 do)를 사용할 수 있습니다에게 pipe

login(context: LoginContext): Observable<Credentials> { 
    return this._http.post<Credentials>("/api/account/login", {Email : context.username,Password:context.password}) 
       .pipe(
        tap(data => { 
         this.setCredentials(data, context.remember); 
        }) 
       ); 
} 

Answer 2

를 사용하여 연산자를 시도하고 여전히 관찰을 반환합니다.

import { tap } from 'rxjs/operators/tap'; 

login(context: LoginContext): Observable<Credentials> { 
    return this._http.post<Credentials>("/api/account/login", {Email : context.username,Password:context.password}) 
     .pipe(do((response) => { 
      // this.setCredentials(data, context.remember); 
     }) 
    ); 
} 

당신이 무엇을 되찾고 싶어하는지 잘 모르기 때문에 작업이 주석 처리되었습니다.

setCredentials의 동작에 따라 다른 것을 반환하려면 대신 map을 사용하고 메서드에서 무엇인가를 반환하십시오.