HttpClient

앵귤러는 브라우저의 XMLHttpRequest을 사용하는 HttpClient클래스를 지원한다.

{
  "results": [
    "Item 1",
    "Item 2",
  ]
}

this.http.get('/api/items').subscribe(data => {
	this.results = data['results'];
});

HttpCleint.get()를 사용하면 서버응답의 본문을 JSON형식으로 바로 가져올 수 있다.

data['results'] 인덱서블타입으로 가져오며 data.results로는 에러가 발생하며 타입스크립트가 data객체의 타입을 알 수 없기때문이다.

http.get<ItemsResponse>('/api/items').subscribe(data => {
  this.results = data.results;
});

get()은 제네릭타입으로 오버로딩되어있어 제네릭타입을 사용할 수 있으며 ItemsResponse는 data의 인터페이스다.

HttpClient.get<MyJsonData>('/data.json', {observe: 'response'})

옵션객체를 이용하면 받는데이터형식, 응답객체의 형식등을 지정할 수 있다.

http
  .get<ItemsResponse>('/api/items')
  .subscribe({
    next:data => {...},
    error:err => {
      console.log('Something went wrong!');
    },
    complete:()=>{...}
  });

오류상황에대해 처리할 수 있다.

http
  .get<ItemsResponse>('/api/items')
  .subscribe(
  	data => {...},
    (err: HttpErrorResponse) => {
      if (err.error instanceof Error) { // 클라이언트오류        
        console.log('An error occurred:', err.error.message);
      } else {  //서버오류
        console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
      }
    }
  });

클라이언트와 서버오류를 구분할 수 있다.

---

httpClient.post('/api/developers/add', body).subscribe(...);

HttpClient에서 반환된 Observable은 콜드(cold)이기때문에 구독해야 한다.

Headers

http
  .post('/api/items/add', body, {
    headers: new HttpHeaders().set('Authorization', 'my-auth-token'),
  })
  .subscribe();

URL Parameters

http
  .post('/api/items/add', body, {
    params: new HttpParams().set('id', '3'),
  })
  .subscribe();

---

interceptor
어플리케이션이 요청을 보내면 인터셉터는 서버로 보내기전에 이를 변환할 수 있고 서버응답을 어플리케이션이 받기전에 이를 변환할 수 있다.

@Injectable()
export class NoopInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req);
  }
}

위 인터셉터는 request를 변환하지 않고 그대로 전달한다.

---

httpClient클래스의 get, put, delete... 메소드들은 옵저버블객체를 반환한다.

this.httpClient.put<Hero>(this.heroesUrl, hero, httpOptions)

서버로부터 배열을 받아 목록을 나열할때 처음에는 배열데이터를 받아서 나열해야 한다.

아이템을 추가할때는 put메소드를 사용해서 추가하고 에러없이 수행되었다면 배열을 다시 받지 않고 있는 배열에 추가할 원소만 추가해서 랜더링하므로 전체를 갱신하지 않아도 되어 효율적이다.

기본적으로 쿼리인자를 사용하지 않기때문에 delete할때도 url을 사용하여 아이템을 삭제한다.