2019-07-01 Angular Http

Angular http

 

getTodos() {
    this.http.get<Todo[]>('http://localhost:3000/todos')
      .subscribe(todos => this.todos = todos);  // 인수로 옵저버이다. 옵저버가 url을 관측
      // 옵저버블 (관측대상) 데이터스트림을 방출할 수 있다. 옵저버가 있으면 방출하겠다. 옵저버가 옵저버블을 관측할거야라는 
      // 관계를 맺어주는게 subscirbe 이다. observable은 객체, observer는 함수 이다. 
      // 옵저버 => 데이터가 왔을때 할일을 적어준다. 결론적으로 promist then과 비슷.
  }

if (error.error instanceof ErrorEvent) {  // 에러타입을 구분한다.
    // 클라이언트 측의 에러
    console.error(`Client-side error: ${error.error.message}`);
    message = error.error.message;
  } else {
    // 백엔트 측의 에러
    console.error(`Server-side error: ${error.status}`);
    message = error.message;
  }

 getTodos(): Observable<Todo[]> {
    return this.http.get<Todo[]>(this.url)
      .pipe(
        tap(() => console.log('POST Request')),
        shareReplay()  // hot observable형태가 된다. 콜드옵저버블은 유니캐스트, 핫은 멀티캐스트
      );
  }

 

JWT 인증방식에 의거 ->  (Json Web Token: 인증처리 대세 방법)

로그인에 성공하면, 백엔드가 우리한테 로그인을 성공했다고 토큰을 준다. 

토큰이라는 객체를 줌(json으로) 우리가 가지고 있다가(가지고 있는 방법은 localstorage에 담거나 쿠키에 담거나) 

 

서버에 토큰을 어떻게 줄것이냐? 헤더에 담는다. 

인터셉터라는것을 만들어놓으면, 무조건 담아서 가게끔 만들어준다.(요청할때마다 만들필요가 없이)

 

파이프라인 : 절차를 진행하는것

HttpClient는 미들웨어 로직을 파이프 라인에 삽입할 수 있는 인터셉터를 도입하였다.