কৌণিক 2 http.get (), মানচিত্র (), সাবস্ক্রাইব () এবং পর্যবেক্ষণযোগ্য প্যাটার্ন - প্রাথমিক ধারণা

Question

এখন, আমার একটি প্রাথমিক পৃষ্ঠা রয়েছে যেখানে আমার তিনটি লিঙ্ক রয়েছে। একবার আপনি সর্বশেষ 'বন্ধু' লিঙ্কে ক্লিক করুন, উপযুক্ত বন্ধু সামগ্রী শুরু করা হয়। সেখানে, আমি আমার ফ্রেন্ডস.জসন ফাইলটিতে রচিত আমার বন্ধুদের তালিকা আনতে / পেতে চাই। এখন অবধি সবকিছু ঠিকঠাক কাজ করে। তবে আমি এখনও RxJs এর পর্যবেক্ষণযোগ্য, মানচিত্র, সাবস্ক্রাইব ধারণাটি ব্যবহার করে কৌণিক 2 এর এইচটিটিপি পরিষেবাটির জন্য নবাগত। আমি এটি বোঝার চেষ্টা করেছি এবং কয়েকটি নিবন্ধ পড়েছি কিন্তু যতক্ষণ না আমি ব্যবহারিক কাজে আসব, আমি এই ধারণাগুলি সঠিকভাবে বুঝতে পারছি না।

এখানে আমি ইতিমধ্যে plnkr তৈরি করেছি যা HTTP সম্পর্কিত কাজ ব্যতীত কাজ করছে is

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.

       }
  }

সঠিকভাবে গাইড এবং ব্যাখ্যা করুন। আমি জানি এটি প্রচুর নতুন বিকাশকারীদের পক্ষে উপকারী হবে।

Answer 1

এখানেই আপনি ভুল করেছেন:

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()) এটি সাফল্য কলব্যাকের আগে পৌঁছে যাওয়ার আগে আপনি একে একে একে কল করা উচিত।

Comments

এখানে আপনি আপনার লাঞ্ছিত যাও । আমি লাইনগুলি পরিবর্তন করেছি: 21, 23 আমার ফ্রেন্ডস.টসে

— আবদুল রহমান এছাড়াওঘেয়ের

আমি যা বুঝতে পারি নি তা হল কেন এখানে "মানচিত্র" ফাংশনটি ব্যবহার করুন? আমরা কেবল ফলাফলটি .json কল করতে পারি। তা করে লাভ কী?

— rubmz

আপনি ঠিক @rubmz। আমি আমার উত্তরে যেমনটি উল্লেখ করেছিলে আপনি তা করতে পারতেন B তবে, একটি বিশাল সুবিধা হ'ল যুক্তিটিকে আলাদা করা। উদাহরণস্বরূপ, আপনার পরিষেবাতে, আপনার একটি ফাংশন রয়েছে getFriends(){return http.get('friends.json').map(r => r.json());}। এখন, আপনি প্রতিবার getFriends().subscribe(...)কল করার প্রয়োজন ছাড়াই কল করতে পারেন .json()।

— আব্দুলরাহমান এছাড়াওঘেয়ের

হ্যাঁ, এটি newbies জন্য সামান্য বিভ্রান্তিকর। সেই দুষ্টু মানচিত্রটি () কী করে এবং কী করে না ... তবে অবশেষে আমি এটিও পেয়েছিলাম :)

— রুবজ

: @Abdulrahman, হয়তো আপনিও এই প্রশ্নের কটাক্ষপাত আছে আগ্রহী হবেন stackoverflow.com/questions/40505691/...

— nyluje

Answer 2

ধারণা

সংক্ষিপ্ত tackles অ্যাসিক্রোনাস প্রসেসিং এবং ইভেন্টগুলিতে পর্যবেক্ষণযোগ্য। প্রতিশ্রুতি তুলনা এটি পর্যবেক্ষণযোগ্য = প্রতিশ্রুতি + ইভেন্ট হিসাবে বর্ণনা করা যেতে পারে।

পর্যবেক্ষণযোগ্যদের সাথে দুর্দান্ত যা হ'ল তারা অলস, এগুলি বাতিল করা যেতে পারে এবং আপনি তাদের মধ্যে কিছু অপারেটর প্রয়োগ করতে পারেন (যেমন map, ...)। এটি অত্যন্ত নমনীয় উপায়ে অ্যাসিনক্রোনাস জিনিসগুলি পরিচালনা করতে দেয়।

পর্যবেক্ষনের সর্বোত্তম শক্তির বর্ণনা দেওয়ার একটি দুর্দান্ত নমুনা হ'ল একটি ফিল্টার ইনপুটটিকে সম্পর্কিত ফিল্টার তালিকার সাথে সংযুক্ত করার উপায়। যখন ব্যবহারকারী অক্ষরগুলিতে প্রবেশ করে, তালিকাটি রিফ্রেশ হয়। পর্যবেক্ষণযোগ্য এজেএক্স অনুরোধগুলি হ্যান্ডেল করে এবং ইনপুটটিতে নতুন মান দ্বারা অন্য কোনও ট্রিগার করা হলে পূর্ববর্তী অগ্রগতি অনুরোধগুলি বাতিল করে। এখানে সম্পর্কিত কোডটি দেওয়া হচ্ছে:

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

( textValueফিল্টার ইনপুট এর সাথে যুক্ত নিয়ন্ত্রণ)।

এই জাতীয় ব্যবহারের ক্ষেত্রে এর বিস্তৃত বিবরণ এখানে দেওয়া হয়েছে: কৌনিক 2 তে ফর্ম পরিবর্তনের জন্য কীভাবে পর্যবেক্ষণ করবেন? ।

অ্যাঙ্গুলার সংযোগ 2015 এবং এগইডে দুটি দুর্দান্ত উপস্থাপনা রয়েছে:

• পর্যবেক্ষণ বনাম প্রতিশ্রুতি - https://egghead.io/lessons/rxjs-rxjs-observables-vs- টির
• একটি-পর্যবেক্ষণযোগ্য তৈরি করা - https://egghead.io/lessons/rxjs-creating-an- অবজেক্টযোগ্য
• আরএক্সজেএস অন্তঃস্থল https://www.youtube.com/watch?v=KOOT7BArVHQ
• কৌণিক 2 ডেটা ফ্লো - https://www.youtube.com/watch?v=bVI5gGTEQ_U

ক্রিস্টোফ বার্গডর্ফ এই বিষয়ে কয়েকটি দুর্দান্ত ব্লগ পোস্ট লিখেছিলেন:

• http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html
• http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

কর্মে

আসলে আপনার কোড সম্পর্কিত, আপনি দুটি পদ্ধতির মিশ্রিত করেছেন ;-) এখানে সেগুলি:

• আপনার নিজের দ্বারা পর্যবেক্ষণযোগ্য পরিচালনা করুন । এই ক্ষেত্রে, আপনি 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());
     }
  }
  

আপনি লক্ষ্য করতে পারেন যে পর্যবেক্ষণগুলি অলস are সুতরাং সংশ্লিষ্ট এইচটিটিপি অনুরোধটি কেবল একবার শ্রোতার সাথে এই subscribeপদ্ধতিটি ব্যবহার করে যুক্ত করা হবে ।

আপনি লক্ষ্য করতে পারেন যে mapপদ্ধতিটি প্রতিক্রিয়া থেকে JSON সামগ্রীগুলি বের করতে এবং তা পর্যবেক্ষণযোগ্য প্রক্রিয়াকরণে ব্যবহার করতে ব্যবহৃত হয়।

আশা করি এটি আপনাকে সহায়তা করবে, থিয়েরি

Comments

সমস্ত রেফারেন্সের জন্য ধন্যবাদ। তবে আপনি কি আমার নিমজ্জন সাহায্য করতে পারেন?

— nyks

আমি আপনার কোড সংক্রান্ত আরও বিশদ সহ আমার উত্তর আপডেট করেছি। আশা করি এটি আপনাকে সহায়তা করবে ;-)

— থিয়েরি টেম্পিলার

দুঃখিত যে আমি আপনার উত্তর গ্রহণ করতে পারে না। এটি আরও স্পষ্ট তবে গ্রহণযোগ্য এবং প্রশংসিত উত্তর আমাকে আমার প্রশ্ন সম্পর্কে যথেষ্ট বুঝতে সাহায্য করেছে। তবে আশা করি আপনার আরও বিস্তারিত ব্যাখ্যা থাকায় আপনি আপনার পরিষ্কার উত্তরটির জন্য ভাল হিট পাবেন। ভাল বেসিক আন্ডারসেটিংয়ের জন্য উত্তরও গৃহীত হয়েছে।

— মাইক্রোনিক্স

থিয়েরি টেম্প্লেয়ার এটি একটি দুর্দান্ত উত্তর তবে একটি জিনিস আমার কাছে পরিষ্কার নয়, আমি http.get ('Friends.json') চেষ্টা করেছি ma যদি হ্যাঁ হয় তবে কীভাবে আপনি এটি পাঠাবেন? ফলাফলটিতে? তারা বিভিন্ন ধরণের।

— স্টাভ আলফি

@ স্টাভ্যালফিও pipesএকটি observables। এই ভিডিওটি দেখুন: youtube.com/watch?v=bVI5gGTEQ_U আরও তথ্যের জন্য থিয়েরি দ্বারা প্রস্তাবিত।

— ক্যানডিজজেট

Answer 3

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

এইচটিটিপিপ্লায়েন্ট এপিআই 4.3.0 সংস্করণে চালু হয়েছিল। এটি বিদ্যমান HTTP এপিআই এর একটি বিবর্তন এবং এটির নিজস্ব প্যাকেজ রয়েছে @ কৌনিক / সাধারণ / HTTP। সর্বাধিক উল্লেখযোগ্য পরিবর্তনগুলির মধ্যে একটি হ'ল এখন প্রতিক্রিয়া অবজেক্টটি ডিফল্টরূপে একটি JSON, সুতরাং এটির আর মানচিত্রের পদ্ধতিতে পার্স করার দরকার নেই traস্রাইটে দূরে আমরা নীচের মতো ব্যবহার করতে পারি

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