Angular2 http.get (), मानचित्र (), सदस्यता () और अवलोकन योग्य पैटर्न - बुनियादी समझ

170

अब, मेरे पास एक प्रारंभिक पृष्ठ है जहां मेरे तीन लिंक हैं। एक बार जब आप अंतिम 'मित्रों' लिंक पर क्लिक करते हैं, तो उपयुक्त मित्र घटक आरंभ हो जाता है। वहाँ, मैं अपने दोस्तों की सूची प्राप्त / प्राप्त करना चाहता / चाहती हूँ। अब तक सब कुछ ठीक है। लेकिन मैं अभी भी RxJs की वेधशालाओं, मानचित्र, सदस्यता अवधारणा का उपयोग कर angular2 की HTTP सेवा के लिए नौसिखिया हूं। मैंने इसे समझने और कुछ लेख पढ़ने की कोशिश की है, लेकिन जब तक मैं व्यावहारिक कार्यों में नहीं लग जाता, मैं उन अवधारणाओं को ठीक से समझने वाला नहीं हूँ।

यहाँ मैंने पहले ही plnkr बना लिया है जो HTTP से संबंधित काम को छोड़कर काम कर रहा है।

Plnkr

myfriends.ts

 import {Component,View,CORE_DIRECTIVES} from 'angular2/core';
 import {Http, Response,HTTP_PROVIDERS} from 'angular2/http';
 import 'rxjs/Rx';
 @Component({
    template: `
    <h1>My Friends</h1>
    <ul>
      <li *ngFor="#frnd of result">
          {{frnd.name}} is {{frnd.age}} years old.
      </li>
    </ul>
    `,
    directive:[CORE_DIRECTIVES]
  })

  export class FriendsList{

      result:Array<Object>; 
      constructor(http: Http) { 
        console.log("Friends are being called");

       // below code is new for me. So please show me correct way how to do it and please explain about .map and .subscribe functions and observable pattern.

        this.result = http.get('friends.json')
                      .map(response => response.json())
                      .subscribe(result => this.result =result.json());

        //Note : I want to fetch data into result object and display it through ngFor.

       }
  }

कृपया मार्गदर्शन करें और ठीक से समझाएं। मुझे पता है कि यह बहुत सारे नए डेवलपर्स के लिए फायदेमंद होगा।

http angular rxjs

— एनवाईकेएस
स्रोत

जवाबों:

205

यहाँ आप गलत हो गया है:

this.result = http.get('friends.json')
                  .map(response => response.json())
                  .subscribe(result => this.result =result.json());

यह होना चाहिए:

http.get('friends.json')
                  .map(response => response.json())
                  .subscribe(result => this.result =result);

या

http.get('friends.json')
                  .subscribe(result => this.result =result.json());

आपने दो गलतियाँ की हैं:

1-आपने स्वयं को अवलोकन योग्य सौंपा this.result। जब आप वास्तव में दोस्तों की सूची असाइन करना चाहते थे this.result। इसे करने का सही तरीका है:

आप अवलोकन योग्य हैं। .subscribeवह कार्य है जो वास्तव में अवलोकनीय है। यह निम्नलिखित के रूप में तीन कॉलबैक पैरामीटर लेता है:

.subscribe(success, failure, complete);

उदाहरण के लिए:

.subscribe(
    function(response) { console.log("Success Response" + response)},
    function(error) { console.log("Error happened" + error)},
    function() { console.log("the subscription is completed")}
);

आमतौर पर, आप सफलता कॉलबैक से परिणाम लेते हैं और इसे अपने चर में असाइन करते हैं। त्रुटि कॉलबैक स्वयं व्याख्यात्मक है। पूर्ण कॉलबैक का उपयोग यह निर्धारित करने के लिए किया जाता है कि आपको बिना किसी त्रुटि के अंतिम परिणाम प्राप्त हुए हैं। ~~आपके प्लंकर पर, पूर्ण कॉलबैक हमेशा सफलता या त्रुटि कॉलबैक के बाद कहा जाएगा।~~

2- दूसरी गलती, आपने फोन .json()किया .map(res => res.json()), तो आपने इसे फिर से अवलोकन के सफलता के कॉलबैक पर बुलाया। .map()एक ट्रांसफ़ॉर्मर है जो .json()सफलता के कॉलबैक में पास होने से पहले आपको (आपके मामले में ) जो भी परिणाम देगा उसे परिणत कर देगा ।

— अब्दुलरहमान अलसोघैयर
स्रोत

यहाँ आप अपने प्लंकर जाओ । मैंने लाइनें बदल

— दीं

मुझे समझ में नहीं आया कि "मैप" फ़ंक्शन का उपयोग यहाँ क्यों किया गया है? हम सिर्फ परिणाम पर .json को कॉल कर सकते हैं। तो ऐसा करने से क्या फायदा?

— रुबज

आप सही हैं @rubmz आप ऐसा कर सकते हैं जैसा कि मैंने अपने उत्तर में उल्लेख किया है। लेकिन, एक बड़ा लाभ तर्क को अलग कर रहा है। उदाहरण के लिए, आपकी सेवा में, आपके पास एक फ़ंक्शन है getFriends(){return http.get('friends.json').map(r => r.json());}। अब, आप हर बार getFriends().subscribe(...)कॉल करने की आवश्यकता के बिना कॉल कर सकते हैं .json()।

— अब्दुलरहमान अलसोघैर

हां, यह न्यूबीज के लिए बस थोड़ा सा भ्रमित करने वाला है। वह मिस्ट्रियस मैप () क्या करता है और क्या नहीं ... लेकिन आखिरकार मुझे वह भी मिल गया :)

— rubmz

@ अब्दुल्रहमान, शायद आप इस प्रश्न पर भी एक नज़र रखना चाहते हैं: stackoverflow.com/questions/40505691/…

— nyluje

138

अवधारणाओं

संक्षेप में वेधशालाएँ अतुल्यकालिक प्रसंस्करण और घटनाओं से निपटती हैं। वादों की तुलना में इसे वेधशालाओं = वादों + घटनाओं के रूप में वर्णित किया जा सकता है।

वेधशालाओं के साथ जो महान है वह आलसी है, उन्हें रद्द किया जा सकता है और आप उनमें कुछ ऑपरेटरों को लागू कर सकते हैं (जैसे map, ...)। यह अतुल्यकालिक चीजों को बहुत लचीले तरीके से संभालने की अनुमति देता है।

वेधशालाओं की सर्वोत्तम शक्ति का वर्णन करने वाला एक महान नमूना फिल्टर इनपुट को संबंधित फ़िल्टर किए गए सूची से जोड़ने का तरीका है। जब उपयोगकर्ता पात्रों में प्रवेश करता है, तो सूची ताज़ा हो जाती है। वेधशालाएं AJAX अनुरोधों को संभालती हैं और इनपुट में नए मान द्वारा ट्रिगर किए जाने पर पिछले इन-प्रगति अनुरोधों को रद्द कर देती हैं। यहाँ इसी कोड है:

this.textValue.valueChanges
    .debounceTime(500)
    .switchMap(data => this.httpService.getListValues(data))
    .subscribe(data => console.log('new list values', data));

( textValueफ़िल्टर इनपुट से जुड़ा नियंत्रण है)।

इस तरह के उपयोग के मामले का एक व्यापक विवरण यहां दिया गया है: कोणीय 2 में रूप परिवर्तन कैसे देखें? ।

AngularConnect 2015 और EggHead में दो शानदार प्रस्तुतियाँ हैं:

वेधशालाएं बनाम वादे - https://egghead.io/lessons/rxjs-rxjs-observables-vs-promises
बनाने-एक-अवलोकन योग्य - https://egghead.io/lessons/rxjs-creating-an-observable
RxJS इन-डेप्थ https://www.youtube.com/watch?v=KOOT7BArVHQ
कोणीय 2 डेटा प्रवाह - https://www.youtube.com/watch?v=bVI5gGTEQ_U

क्रिस्टोफ बर्गडॉर्फ ने इस विषय पर कुछ महान ब्लॉग पोस्ट भी लिखे:

कार्रवाई में

वास्तव में आपके कोड के बारे में, आपने दो दृष्टिकोणों को मिलाया;;

अपने स्वयं के द्वारा अवलोकन को प्रबंधित करें । इस स्थिति में, आप subscribeविधि का पालन करने के लिए जिम्मेदार हैं और परिणाम को घटक की विशेषता में निर्दिष्ट करते हैं। आप इस विशेषता का उपयोग संग्रह पर पुनरावृति के लिए दृश्य में कर सकते हैं:
```
@Component({
  template: `
    <h1>My Friends</h1>
    <ul>
      <li *ngFor="#frnd of result">
        {{frnd.name}} is {{frnd.age}} years old.
      </li>
    </ul>
  `,
  directive:[CORE_DIRECTIVES]
})
export class FriendsList implement OnInit, OnDestroy {
  result:Array<Object>; 

  constructor(http: Http) {
  }

  ngOnInit() {
    this.friendsObservable = http.get('friends.json')
                  .map(response => response.json())
                  .subscribe(result => this.result = result);
   }

   ngOnDestroy() {
     this.friendsObservable.dispose();
   }
}
```
दोनों getऔर mapतरीकों से रिटर्न अवलोकन योग्य है परिणाम नहीं (वादों के साथ उसी तरह)।
कोणीय टेम्पलेट द्वारा अवलोकन का प्रबंधन करते हैं । आप asyncअवलोकन योग्य रूप से प्रबंधित करने के लिए पाइप का भी लाभ उठा सकते हैं । इस मामले में, subscribeविधि को स्पष्ट रूप से कॉल करने की आवश्यकता नहीं है ।
```
@Component({
  template: `
    <h1>My Friends</h1>
    <ul>
      <li *ngFor="#frnd of (result | async)">
        {{frnd.name}} is {{frnd.age}} years old.
      </li>
    </ul>
  `,
  directive:[CORE_DIRECTIVES]
})
export class FriendsList implement OnInit {
  result:Array<Object>; 

  constructor(http: Http) {
  }

  ngOnInit() {
    this.result = http.get('friends.json')
                  .map(response => response.json());
   }
}
```

आप देख सकते हैं कि वेधशालाएं आलसी हैं। इसलिए संबंधित HTTP अनुरोध को केवल एक बार श्रोता कहा जाएगा, जिस पर subscribeविधि का उपयोग करके इसे संलग्न किया जाएगा ।

आप यह भी देख सकते हैं कि mapविधि का उपयोग प्रतिक्रिया से JSON सामग्री को निकालने के लिए किया जाता है और इसका उपयोग तब अवलोकन प्रक्रिया में किया जाता है।

आशा है कि यह आपकी मदद करता है, थियरी

— थियरी टेम्पलियर
स्रोत

सभी संदर्भों के लिए धन्यवाद। लेकिन क्या आप मुझे मेरी मदद कर सकते हैं?

— नीक

मैंने आपके कोड के बारे में अधिक विवरण के साथ अपना उत्तर अपडेट किया। आशा है कि यह आपकी मदद करेगा ;-)

— थियरी टेंप्लियर

खेद है कि मैं आपको उत्तर नहीं दे सका। यह अधिक स्पष्ट लेकिन स्वीकृत और प्रशंसित उत्तर है जिससे मुझे अपने प्रश्न के बारे में पर्याप्त समझने में मदद मिली। लेकिन उम्मीद है कि आपको अपने स्पष्ट उत्तर के लिए अच्छे हिट मिलेंगे क्योंकि आपके पास अधिक विस्तृत विवरण है। अच्छी बुनियादी समझ के लिए भी स्वीकृत उत्तर।

— माइक्रोनिक्स

थियरी टेम्प्लियर यह एक उत्कृष्ट उत्तर है, लेकिन एक बात मेरे लिए स्पष्ट नहीं है, मैंने http.get ('friends.json') को खरीदा है। pmap (प्रतिक्रिया => response.json ()) अवलोकनीय <Array <Object >> >> लौटाता है। यदि हाँ, तो आप इसे कैसे भेजें। वे भिन्न प्रकार के होते हैं।

— स्टैफ अलफी

@StavAlfi pipesभी एक हैं observables। इस वीडियो को देखें: youtube.com/watch?v=bVI5gGTEQ_U अधिक जानकारी के लिए थिएरी द्वारा सुझाया गया।

— कैंडिडेट

import { HttpClientModule } from '@angular/common/http';

HttpClient API को 4.3.0 संस्करण में पेश किया गया था। यह मौजूदा HTTP एपीआई का विकास है और इसका अपना पैकेज @ कोणीय / सामान्य / http है। सबसे उल्लेखनीय परिवर्तनों में से एक यह है कि अब प्रतिक्रिया वस्तु डिफ़ॉल्ट रूप से एक JSON है, इसलिए इसे अब मानचित्र विधि से पार्स करने की कोई आवश्यकता नहीं है। सही दूर हम नीचे की तरह उपयोग कर सकते हैं।

http.get('friends.json').subscribe(result => this.result =result);

— राजेश कुमार
स्रोत