RxJS를 사용하여 Angular에서 여러 HTTP 요청 처리

블로그

RxJS를 사용하여 Angular에서 여러 HTTP 요청 처리

단일 페이지 앱에서 발생하는 일반적인 패턴은 여러 API 엔드포인트에서 데이터를 수집한 다음 수집된 데이터를 사용자에게 표시하는 것입니다. 수많은 비동기 요청을 가져와 관리하는 것은 까다로울 수 있지만 Angular의 Http 서비스와 포함된 RxJS 라이브러리의 약간의 도움으로 몇 줄의 코드로 완료할 수 있습니다. 여러 요청을 처리하는 방법에는 여러 가지가 있습니다. 순차적이거나 병렬일 수 있습니다. 이 포스트에서는 두 가지 모두를 다룰 것입니다.

Angular Http 서비스를 사용하여 간단한 HTTP 요청부터 시작하겠습니다.

import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-root', templateUrl: 'app/app.component.html' }) export class AppComponent { constructor(private http: HttpClient) { } ngOnInit() { this.http.get('/api/people/1').subscribe(json => console.log(json)); } }

우리 앱에는 Dependency Injection을 통해 Angular의 Http 서비스를 가져오는 단일 구성 요소만 있습니다. Angular는 구성 요소의 생성자에서 서명을 볼 때 Http 서비스의 인스턴스를 제공합니다.

이제 서비스가 있으므로 테스트 API에서 일부 데이터를 가져오기 위해 서비스를 호출합니다. |_+_|에서 이 작업을 수행합니다. 이것은 데이터를 가져오는 데 이상적인 수명 주기 후크입니다. 문서에서 |_+_|t에 대해 자세히 읽을 수 있습니다. 지금은 HTTP 호출에 집중하겠습니다. |_+_| |_+_|에 GET 요청을 합니다. 그러면 |_+_| 데이터가 돌아올 때 구독합니다. 데이터가 돌아오면 콘솔에 응답을 기록합니다. 따라서 이것은 단일 요청을 수행하는 가장 간단한 코드 스니펫입니다. 다음으로 두 가지 요청을 만드는 방법을 살펴보겠습니다.

구독하다

다음 예에서는 다음과 같은 사용 사례가 있습니다. Star Wars API에서 캐릭터를 검색해야 합니다. 시작하려면 요청하려는 원하는 캐릭터의 ID가 있습니다.

캐릭터를 되찾았을 때 동일한 API를 사용하지만 다른 REST 엔드포인트에서 해당 캐릭터의 고향을 가져와야 합니다. 이 예는 순차적입니다. 하나의 요청을 하고 다음 요청을 하십시오.

fxnetworks com/activate
ngOnInit

ngOnInit 메소드를 보면 HTTP 요청이 보입니다. 먼저 |_+_|에서 사용자를 가져오도록 요청합니다. 일단 로드되면 특정 캐릭터의 고향을 가져오는 두 번째 요청을 합니다. 홈월드를 얻으면 캐릭터 객체에 추가하고 |_+_| 템플릿에 표시할 구성 요소의 속성입니다. 이것은 작동하지만 여기서 주의해야 할 두 가지 사항이 있습니다. 첫째, 우리는 가독성이 좋지 않은 Observable을 중첩할 때 이 중첩 피라미드 구조를 보기 시작했습니다. 둘째, 우리의 두 요청은 순차적이었습니다. 따라서 우리의 사용 사례가 캐릭터의 홈월드를 얻고 해당 데이터를 얻기 위해 캐릭터를 로드한 다음 홈월드를 로드해야 한다고 가정해 보겠습니다. 특정 연산자를 사용하여 위의 코드를 압축할 수 있습니다.

병합 맵

이 예에서는 |_+_| 운영자. 먼저 코드 예제를 살펴보겠습니다.

ngOnIni

이 예에서는 |_+_| |_+_|라고도 함 Observable 값을 매핑/반복합니다. 따라서 우리의 예에서는 홈월드를 얻을 때 캐릭터 Observable 스트림 내에서 Observable을 다시 가져옵니다. 이것은 Observable에 중첩된 Observable을 생성합니다. |_+_| operator는 구독하고 내부 Observable에서 값을 가져와 부모 스트림으로 다시 전달함으로써 우리를 돕습니다. 이것은 코드를 상당히 압축하고 중첩 구독의 필요성을 제거합니다. 이 작업을 수행하는 데 약간의 시간이 걸릴 수 있지만 연습을 통해 RxJS 도구 벨트에서 편리한 도구가 될 수 있습니다. 다음으로 RxJS를 사용한 여러 병렬 요청을 살펴보겠습니다.

포크조인

다음 예에서는|_+_|라는 연산자를 사용할 것입니다. Promise에 익숙하다면|_+_|와 매우 유사합니다. |_+_| operator를 사용하면 Observable 목록을 가져와 병렬로 실행할 수 있습니다. 목록의 모든 Observable이 값을 내보내면 |_+_| 목록의 Observable에서 해결된 모든 값의 목록을 포함하는 단일 Observable 값을 내보냅니다. 이 예에서는 캐릭터와 캐릭터 홈월드를 로드하려고 합니다. 우리는 이미 이러한 리소스의 ID가 무엇인지 알고 있으므로 병렬로 요청할 수 있습니다.

http.get()

이 예에서는 변수에서 character 및 characterHomeworld Observable을 캡처합니다. Observable은 게으르기 때문에 누군가 구독할 때까지 실행되지 않습니다. forkJoin에 전달하면 forkJoin 연산자는 각 Observable을 구독하고 실행하여 방출된 각 값을 수집하고 마지막으로 완료된 모든 HTTP 요청을 포함하는 단일 배열 값을 방출합니다. 이것은 JavaScript UI 프로그래밍의 일반적인 패턴입니다. RxJS를 사용하면 기존 콜백을 사용하는 것에 비해 비교적 쉽습니다.

mergeMap/flatMap 및 forkJoin 연산자를 사용하면 몇 줄의 코드로 매우 정교한 비동기 코드를 작성할 수 있습니다.

읽어 주셔서 감사합니다 !

#모난