প্রতিশ্রুতিটি পর্যবেক্ষণযোগ্যতে রূপান্তর করুন


214

আমি পর্যবেক্ষণযোগ্যদের চারপাশে আমার মাথা গুটিয়ে দেওয়ার চেষ্টা করছি। আমি পর্যবেক্ষকরা যেভাবে বিকাশ এবং পঠনযোগ্যতার সমস্যাগুলি সমাধান করেন তাতে আমি পছন্দ করি। আমি যেমন পড়ি, সুবিধাগুলি অপরিসীম।

এইচটিটিপি এবং সংগ্রহগুলিতে পর্যবেক্ষণগুলি সরাসরি এগিয়ে রয়েছে বলে মনে হচ্ছে। আমি এই জাতীয় কিছু পর্যবেক্ষণযোগ্য প্যাটার্নে রূপান্তর করতে পারি।

প্রমাণীকরণ সরবরাহ করার জন্য এটি আমার পরিষেবা উপাদান থেকে। ডেটা, ত্রুটি এবং সমাপ্তি হ্যান্ডলারের সহায়তায় - আমি এঙ্গুলার 2-তে অন্যান্য এইচটিটিপি পরিষেবাদির মতো কাজ করতে পছন্দ করব।

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then(function(firebaseUser) {
    // do something to update your UI component
    // pass user object to UI component
  })
  .catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });

এখানে যে কোনও সহায়তা অনেক প্রশংসিত হবে। আমার কাছে একমাত্র বিকল্প সমাধান ছিল EventEmitterএস তৈরি করা । তবে আমি অনুমান করি যে পরিষেবা বিভাগে জিনিসগুলি করার এটি একটি ভয়ানক উপায়

উত্তর:


317

আপনি যদি RxJS 6.0.0 ব্যবহার করছেন:

import { from } from 'rxjs';
const observable = from(promise);

9
.3.৩.৩ ব্যবহার করে fromপর্যবেক্ষণযোগ্য পদ্ধতিটি ফিরে আসছে তবে এটি সাবস্ক্রিপশনের মান হিসাবে প্রতিশ্রুতি প্রেরণ করছে। :(
লক্ষ্মীকান্ত ডাঙে

1
এই উত্তরটি আরএক্সজেএস 6+ এর জন্য সঠিক। আমি operators"অন্তর্দৃষ্টি" এর মাধ্যমে আমদানি করার চেষ্টা করেছি - আমি ভুল ছিল।
ভিএসও

119

এটা চেষ্টা কর:

import 'rxjs/add/observable/fromPromise';
import { Observable } from "rxjs/Observable";

const subscription = Observable.fromPromise(
    firebase.auth().createUserWithEmailAndPassword(email, password)
);
subscription.subscribe(firebaseUser => /* Do anything with data received */,
                       error => /* Handle error here */);

আপনি এখানে থেকে প্রাইম অপারেটরের সম্পূর্ণ রেফারেন্স পেতে পারেন ।


47
import 'rxjs/add/observable/fromPromise';
সাইমন ব্রিগেস

16
import { Observable } from "rxjs/Observable"; :)
ভাগ্যবানী

41

1 ডায়রেক্ট এক্সিকিউশন / রূপান্তর

fromপূর্বে তৈরি প্রতিশ্রুতিটি পর্যবেক্ষণযোগ্যতে সরাসরি রূপান্তর করতে ব্যবহার করুন ।

import { from } from 'rxjs';

// getPromise() will only be called once
const observable$ = from(getPromise());

observable$এটি একটি উত্তপ্ত পর্যবেক্ষণযোগ্য হবে যা গ্রাহকদের প্রতিশ্রুতি মূল্য কার্যকরভাবে রিপ্লে করে।

প্রতিশ্রুতিবদ্ধ সংস্থা কার্যকর করা হচ্ছে বা পর্যবেক্ষণযোগ্য তৈরি করার সময় ইতিমধ্যে সমাধান করা হয়েছে। যদি অভ্যন্তরীণ প্রতিশ্রুতি সমাধান করা হয়ে থাকে তবে পর্যবেক্ষণযোগ্য কোনও নতুন গ্রাহক তাৎক্ষণিকভাবে এর মান পাবেন।

2 প্রতিটি সাবস্ক্রাইব উপর স্থগিত কার্যকর

deferএকটি পর্যবেক্ষণযোগ্য প্রতিশ্রুতি তৈরি এবং রূপান্তর স্থগিত করতে ইনপুট হিসাবে প্রতিশ্রুতি কারখানা ফাংশন সহ ব্যবহার করুন ।

import { defer } from 'rxjs';

// getPromise() will be called every time someone subscribes to the observable$
const observable$ = defer(() => getPromise());

observable$একটি ঠান্ডা পর্যবেক্ষণযোগ্য হবে

পার্থক্য fromহ'ল deferকোনও গ্রাহকের জন্য অপেক্ষা করে এবং তারপরে প্রদত্ত প্রতিশ্রুতি কারখানার ফাংশনটি কল করে একটি নতুন প্রতিশ্রুতি তৈরি করে। এটি কার্যকর যখন আপনি একটি পর্যবেক্ষণযোগ্য তৈরি করতে চান তবে অভ্যন্তরীণ প্রতিশ্রুতিটি এখনই কার্যকর করা উচিত নয়। অভ্যন্তরীণ প্রতিশ্রুতি কেবল তখনই কার্যকর করা হবে যখন কেউ পর্যবেক্ষণযোগ্যতে সাবস্ক্রাইব করে। প্রতিটি গ্রাহক তার নিজস্ব নতুন পর্যবেক্ষণযোগ্যও পাবেন।

3 অনেক অপারেটর সরাসরি প্রতিশ্রুতি গ্রহণ করেন

সর্বাধিক RxJS অপারেটার যে মেশা (যেমন merge, concat, forkJoin, combineLatest...) বা observables রুপান্তর (যেমন switchMap, mergeMap, concatMap, catchError...) প্রতিশ্রুতি সরাসরি গ্রহণ। আপনি যদি fromসেগুলির মধ্যে কোনও একটি ব্যবহার করেন তবে আপনাকে প্রথমে কোনও প্রতিশ্রুতি মোড়ানোর জন্য ব্যবহার করতে হবে না (তবে একটি শীতল পর্যবেক্ষণযোগ্য তৈরি করতে আপনার এখনও ব্যবহার করতে হতে পারে defer)।

// Execute two promises simultaneously
forkJoin(getPromise(1), getPromise(2)).pipe(
  switchMap(([v1, v2]) => v1.getPromise(v2)) // map to nested Promise
)

আপনি যে অপারেটরটি ব্যবহার করছেন তা গ্রহণ করে বা না তা দেখতে ডকুমেন্টেশন বা বাস্তবায়ন পরীক্ষা করুন ।ObservableInputSubscribableOrPromise

type ObservableInput<T> = SubscribableOrPromise<T> | ArrayLike<T> | Iterable<T>;
// Note the PromiseLike ----------------------------------------------------v
type SubscribableOrPromise<T> = Subscribable<T> | Subscribable<never> | PromiseLike<T> | InteropObservable<T>;

fromএবং deferউদাহরণের মধ্যে পার্থক্য : https://stackblitz.com/edit/rxjs-6rb7vf

const getPromise = val => new Promise(resolve => {
  console.log('Promise created for', val);
  setTimeout(() => resolve(`Promise Resolved: ${val}`), 5000);
});

// the execution of getPromise('FROM') starts here, when you create the promise inside from
const fromPromise$ = from(getPromise('FROM'));
const deferPromise$ = defer(() => getPromise('DEFER'));

fromPromise$.subscribe(console.log);
// the execution of getPromise('DEFER') starts here, when you subscribe to deferPromise$
deferPromise$.subscribe(console.log);

4
আমি মনে করি যে পার্থক্যটি মূলধন, এটি দেখানোর জন্য ধন্যবাদ।
স্টারসক্রিম

1

আপনি কোনও সাবজেক্ট ব্যবহার করতে পারেন এবং প্রতিশ্রুতি থেকে এর পরবর্তী () ফাংশনটি ট্রিগার করতে পারেন । নীচে নমুনা দেখুন:

নীচের মত কোড যুক্ত করুন (আমি পরিষেবা ব্যবহার করেছি)

class UserService {
  private createUserSubject: Subject < any > ;

  createUserWithEmailAndPassword() {
    if (this.createUserSubject) {
      return this.createUserSubject;
    } else {
      this.createUserSubject = new Subject < any > ();
      firebase.auth().createUserWithEmailAndPassword(email,
          password)
        .then(function(firebaseUser) {
          // do something to update your UI component
          // pass user object to UI component
          this.createUserSubject.next(firebaseUser);
        })
        .catch(function(error) {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          this.createUserSubject.error(error);
          // ...
        });
    }

  }
}

নীচের মত উপাদান থেকে ব্যবহারকারী তৈরি করুন

class UserComponent {
  constructor(private userService: UserService) {
    this.userService.createUserWithEmailAndPassword().subscribe(user => console.log(user), error => console.log(error);
    }
  }


বিষয়গুলি নিম্ন স্তরের যন্ত্রপাতি are আপনি যখন প্রসারিত করবেন তখন ব্যতীত বিষয়গুলি ব্যবহার করবেন না rxjs
polkovnikov.ph

আমি কেবল একটি সমাধান দিচ্ছি।
শিবাং গুপ্ত

আপনি new Observable(observer => { ... observer.next() ... })এটি প্রয়োগের জন্য কমপক্ষে কোনও উপায় দেখিয়ে দিতে পারেন । যদিও এটি বিদ্যমান সুপরিচিত ফাংশনটির পুনরায় বাস্তবায়ন হবে, এটি সরাসরি প্রশ্নের উত্তর দেবে এবং পাঠকদের জন্য ক্ষতিকারক হবে না।
polkovnikov.ph


0

পর্যবেক্ষকের কাছে কোনও পর্যবেক্ষককে ফিরিয়ে দেওয়ার জন্য আপনি প্রতিশ্রুতি কার্যকারিতার চারপাশে একটি মোড়ক যুক্ত করতে পারেন।

  • ডিফার () অপারেটর ব্যবহার করে একটি অলস পর্যবেক্ষণযোগ্য তৈরি করা যা আপনাকে কেবলমাত্র পর্যবেক্ষক সাবস্ক্রাইব করলেই পর্যবেক্ষণযোগ্য তৈরি করতে দেয়।
import { of, Observable, defer } from 'rxjs'; 
import { map } from 'rxjs/operators';


function getTodos$(): Observable<any> {
  return defer(()=>{
    return fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => {
        return json;
      })
  });
}

getTodos$().
 subscribe(
   (next)=>{
     console.log('Data is:', next);
   }
)

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.