Angular 입문 튜 토리 얼 시리즈: 34: Angular 6 의 Http 모듈 과 Rxjs 6

Angular 6 의 업 그 레이 드 는 약간 영향 을 미 치 는 부분 은 주로 Rxjs 6 에 집중 되 어야 하 는데 http 는 Angular 4.3 이후 에 변화 가 생 겼 기 때문에 빚 이 없 으 면 업 그 레이 드 는 간단 할 것 이다.빚 이 있어 도 수정 내용 은 많 지 않다.
rxjs 의 변환
rxjs 6 는 주로 가방 의 구조 / pipe 의 사용 방식 / API 의 이름 을 바 꾸 는 것 이 이전 버 전의 사용 방식 과 서로 어 울 리 지 않 는 변경 이기 때문에 실제 사용 에서 다음 과 같은 변화 가 생 겼 다.
import 방식
import 형식
구형 방식
새 버 전 방식 (rxjs 6)
Observable
import { Observable } from ‘rxjs/observable’
import { Observable } from ‘rxjs’
map
import ‘rxjs/add/operator/map’
import { map } from ‘rxjs/operator’
fromPromise
import ‘rxjs/add/observable/fromPromise’
import { fromPromise } from ‘rxjs’
일반적인 가 져 오 는 방법:

import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, combineLatest, SubscriptionLike, PartialObserver,concat,combineLatest } from 'rxjs';
import { map, filter, scan } from 'rxjs/operators';
import { webSocket } from 'rxjs/webSocket';
import { ajax } from 'rxjs/ajax';
import { TestScheduler } from 'rxjs/testing';

API 이름 바 꾸 기
구 판
새 버 전 (rxjs 6)
do()
tap()
catch()
catchError()
switch()
switchAll()
finally()
finalize()
throw()
throwError()
전체적으로 보면 이번 변경 으로 인해 가방 의 구조 가 더욱 뚜렷 해 지고 rxjs 를 이용 하여 인용 할 수 없 으 며 operator 는 모두 rxjs / operator 에 집중 하여 관 리 를 한다.
http 호출 부분
angular 의 호출 은 Http 가 제공 하 는 서 비 스 를 이용 하여 Observable 의 반환 값 을 얻 는 것 으로 간단하게 나 눌 수 있 으 며, Observable 의 반환 값 에 따라 subscribe 작업 두 단 으로 나 눌 수 있 습 니 다. 여기 서도 두 가지 방식 에서 의 사용 방법의 차이 점 을 간단하게 정리 합 니 다.
구 판
새 버 전 (4.3 이후)
Http
HttpClient
Response
HttpResponse
Request
HttpRequest
Headers
HttpHeaders
우선 http 호출 부분 에서 가장 큰 차이 점 은 직접 되 돌아 오 는 것 입 니 다.
get
구 판

http @angular/http  Http
http.get(url).map(response: Response) => {
    response.json().xxxx    
}

신 판

http @angular/common/http  HttpClient
http.get(url).pipe(map(item => item['xxxxxx']));
}

put/post
구 판

http @angular/http  Http
headers = new Headers({'Content-type': 'application/json'});
http.put(url, JSON.stringify(body),{headers: headers}).map((response: Response) => {
    response.json.xxxxx    
})

신 판

http @angular/common/http  HttpClient
headers = new HttpHeaders({'Content-type': 'application/json'});
http.put(url)put(url, JSON.stringify(body),{headers: headers}).pipe(map(item => {
  item['xxxxxx']  
  }));
}

delete
구 판

http @angular/http  Http
http.delete(url).map(response: Response) => {
    response.json().xxxx    
}

신 판

http @angular/common/http  HttpClient
http.delete(url).pipe(map(item => item['xxxxxx']));
}

subscribe 호출 부분
Observable 값 을 subscribe 로 사용 하기:

Observable 
.subscribe(respose => {
    response    
})

총결산
이 글 은 Angular 6 에서 http 와 rxjs 를 사용 하 는 것 과 관련 된 기초 와 신 구 사용 방식 의 차이 점 을 정리 하고 다음 글 은 rxjs 6 등 을 사용 하여 Rest 의 CRUD 작업 을 시작 합 니 다.