Angular 2
API 요청이있는 각도 RXJS 주제 및 Observables
수색…
비고
Angular 2 Http 서비스와 RxJS로 API 요청을하는 것은 Angular 1.x에서의 약속 작업과 매우 유사합니다.
Http 클래스를 사용하여 요청하십시오. Http 클래스는 해당 메소드를 통해 HTTP 요청 GET , POST , PUT , DELETE , PATCH , HEAD 요청을 발행하는 메소드를 노출합니다. 또한 모든 종류의 HTTP 요청을 발행하기위한 일반 request 메소드를 제공합니다.
Http 클래스의 모든 메서드는 Observable<Response> 반환하며 RxJS 작업을 적용 할 수 있습니다. 관찰 가능한 스트림에서 데이터가 반환되면 .subscribe() 메서드를 호출하고 호출 할 함수를 전달합니다.
관찰 가능한 관찰 스트림에는 Response 라는 하나의 값만 포함되며 HTTP 요청이 성공적으로 완료되면 완료되거나 완료됩니다. 오류가 발생하면 오류 / 오류가 발생합니다.
참고로, Http 모듈에 의해 반환 된 관측 값은 콜드 (cold )입니다. 즉, 관측 가능 항목을 여러 번 구독하면 각 구독마다 원래 요청이 한 번 실행 됩니다. 이는 응용 프로그램의 여러 구성 요소에서 결과를 사용하려는 경우에 발생할 수 있습니다. GET 요청의 경우 약간의 추가 요청이 발생할 수 있지만 PUT 또는 POST 요청을 두 번 이상 구독하면 예기치 않은 결과가 발생할 수 있습니다.
기본 요청
다음 예제에서는 간단한 HTTP GET 요청을 보여줍니다. http.get() 은 subscribe 메소드가있는 Observable 을 리턴합니다. 이 배열은 반환 된 데이터를 posts 배열에 추가합니다.
var posts = []
getPosts(http: Http):void {
this.http.get(`https://jsonplaceholder.typicode.com/posts`)
.map(response => response.json())
.subscribe(post => posts.push(post));
}
API 요청 캡슐화
자체 처리 클래스에서 HTTP 처리 논리를 캡슐화하는 것이 좋습니다. 다음 클래스는 게시물 가져 오기 방법을 제공합니다. http.get() 메서드를 호출하고 반환 된 Observable 에서 .map 을 호출하여 Response 개체를 Post 개체로 변환합니다.
import {Injectable} from "@angular/core";
import {Http, Response} from "@angular/http";
@Injectable()
export class BlogApi {
constructor(private http: Http) {
}
getPost(id: number): Observable<Post> {
return this.http.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
.map((response: Response) => {
const srcData = response.json();
return new Post(srcData)
});
}
}
앞의 예제는 Post 클래스를 사용하여 반환 된 데이터를 보관합니다.
export class Post {
userId: number;
id: number;
title: string;
body: string;
constructor(src: any) {
this.userId = src && src.userId;
this.id = src && src.id;
this.title = src && src.title;
this.body = src && src.body;
}
}
이제 구성 요소는 BlogApi 클래스를 사용하여 Http 클래스의 작동으로 자체에 관 계없이 Post 데이터를 쉽게 검색 할 수 있습니다.
여러 요청을 기다립니다.
한 가지 일반적인 시나리오는 계속하기 전에 여러 요청이 완료 될 때까지 기다리는 것입니다. 이것은 forkJoin 메소드를 사용하여 수행 할 수 있습니다.
다음 예제에서는 forkJoin 을 사용하여 Observables 를 반환하는 두 개의 메서드를 호출합니다. Observable이 완료되면 .subscribe 메소드에 지정된 콜백이 호출됩니다. 에서 제공하는 매개 변수 .subscribe 호출에 지정된 순서와 일치 .forkJoin . 이 경우 첫 번째 posts 이 tags 됩니다.
loadData() : void {
Observable.forkJoin(
this.blogApi.getPosts(),
this.blogApi.getTags()
).subscribe((([posts, tags]: [Post[], Tag[]]) => {
this.posts = posts;
this.tags = tags;
}));
}