Angular 2
एपीआई अनुरोधों के साथ कोणीय RXJS विषय और वेधशाला

टिप्पणियों

मूल अनुरोध

निम्न उदाहरण एक सरल HTTP GET अनुरोध प्रदर्शित करता है। http.get() एक Observable रिटर्न देता है जिसकी विधि subscribe । यह एक लौटे डेटा को posts सरणी में जोड़ता है।

var posts = []

getPosts(http: Http):void {
    this.http.get(`https://jsonplaceholder.typicode.com/posts`)
        .map(response => response.json())
        .subscribe(post => posts.push(post));
}

एपीपी अनुरोधों को एनकैप्सुलेट करना

HTTP हैंडलिंग तर्क को अपनी कक्षा में एनकैप्सुलेट करना एक अच्छा विचार हो सकता है। निम्न वर्ग पोस्ट प्राप्त करने के लिए एक विधि को उजागर करता है। यह कॉल http.get() विधि और कॉल .map लौटे पर Observable कन्वर्ट करने के लिए 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 । जब .subscribe पूरी हो .subscribe तो .subscribe मेथड में निर्दिष्ट कॉलबैक को .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;
    }));
}