Jaka jest różnica między obietnicami a Obserwowalnymi?

Zarówno Promises jak i Observables dostarczają nam abstrakcji, które pomagają nam radzić sobie z asynchroniczną naturą naszych aplikacji. Różnica między nimi została wyraźnie wskazana przez @Günter i @Relu.

Ponieważ fragment kodu jest wart tysiąca słów, pozwól przejść przez poniższy przykład, aby łatwiej je zrozumieć.

Dzięki @ Christoph Burgdorf za niesamowity artykuł

Kątowe zastosowanie Rx.js obserwują zamiast obietnic do obsługi HTTP.

Załóżmy, że budujesz funkcję wyszukiwania , która powinna natychmiast wyświetlać wyniki podczas pisania. Brzmi znajomo, ale z tym zadaniem wiąże się wiele wyzwań.

• nie chcemy uderzać w punkt końcowy serwera za każdym razem, gdy użytkownik naciśnie klucz, powinien zalać go burzą żądań HTTP. Zasadniczo chcemy go uderzyć tylko wtedy, gdy użytkownik przestał pisać, zamiast każdym naciśnięciem klawisza.
• Don ' t hit the wyszukaj punkt końcowy za pomocą tego samego params zapytania dla kolejnych żądań.
• radzić sobie z niekonsekwentnymi odpowiedziami. Gdy mamy kilka wniosków w trakcie lotu w tym samym czasie, musimy uwzględnić przypadki, w których wracają one w nieoczekiwanej kolejności. Wyobraźmy sobie, że najpierw wpisujemy komputer , zatrzymujemy, żądanie wychodzi, wpisujemy samochód, zatrzymujemy, żądanie wychodzi. Teraz mamy dwa wnioski w locie. Niestety, Prośba, która niesie wyniki dla komputer powraca po prośbie, która niesie wyniki dla samochodu .

Demo będzie po prostu składać się z dwóch plików: app.ts i wikipedia-service.ts. W realnym świecie najprawdopodobniej podzielilibyśmy sprawy dalej.

Poniżej znajduje się implementacja oparta na obietnicach, która nie obsługuje żadnego z opisanych przypadków edge.

wikipedia-service.ts

import { Injectable } from '@angular/core';
import { URLSearchParams, Jsonp } from '@angular/http';

@Injectable()
export class WikipediaService {
  constructor(private jsonp: Jsonp) {}

  search (term: string) {
    var search = new URLSearchParams()
    search.set('action', 'opensearch');
    search.set('search', term);
    search.set('format', 'json');
    return this.jsonp
                .get('http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK', { search })
                .toPromise()
                .then((response) => response.json()[1]);
  }
}

Wprowadzamy usługę Jsonp, aby złożyć GET wniosek przeciwko API Wikipedii z podanym Szukana fraza. Zauważ, że wywołujemy toPromise, aby przejść z Observable<Response> do Promise<Response>. Ostatecznie kończy się Promise<Array<string>> jako typ powrotu naszej metody wyszukiwania.

app.ts

// check the plnkr for the full list of imports
import {...} from '...';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Wikipedia Search</h2>
      <input #term type="text" (keyup)="search(term.value)">
      <ul>
        <li *ngFor="let item of items">{{item}}</li>
      </ul>
    </div>
  `
})
export class AppComponent {
  items: Array<string>;

  constructor(private wikipediaService: WikipediaService) {}

  search(term) {
    this.wikipediaService.search(term)
                         .then(items => this.items = items);
  }
}

Rozpakowujemy wynik obietnicy , że metoda wyszukiwania Wikipedii zwraca i wyświetla ją jako prostą tablicę łańcuchów do szablonu, dzięki czemu możemy mieć *ngFor pętlę przez nią i zbudować dla nas listę.

Zobacz przykład implementacji opartej na obietnicy NA Plunker

Gdzie obserwowalne naprawdę świecą

Zmieńmy nasz kod, aby nie hamować punktu końcowego przy każdym naciśnięciu klawisza, ale zamiast tego wysłać żądanie, gdy użytkownik przestał wpisywać dla 400 ms

Aby odsłonić takie super uprawnienia musimy najpierw uzyskać Observable<string>, który zawiera wyszukiwany termin, który wpisuje użytkownik. Zamiast ręcznego powiązania ze zdarzeniem keyup, możemy skorzystać z dyrektywy Angular formControl. Aby użyć tej dyrektywy, musimy najpierw zaimportować ReactiveFormsModule do naszego modułu aplikacji.

app.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JsonpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [BrowserModule, JsonpModule, ReactiveFormsModule]
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Po zaimportowaniu możemy użyć formControl z naszego szablonu i ustawić go na nazwę "term".

<input type="text" [formControl]="term"/>

W naszym komponencie tworzymy instancję FormControl z @angular/form i wystaw go jako pole pod nazwą term na naszym komponencie.

Za kulisami, term automatycznie ujawnia Observable<string> jako własność valueChanges, którą możemy subskrybować. Teraz, gdy mamy Observable<string>, pokonanie wejścia użytkownika jest tak proste, jak wywołanie {[30] } na naszym Observable. Zwróci to nową Observable<string>, która będzie emitować nową wartość tylko wtedy, gdy nie pojawią się nowe wartości przez 400ms.

export class App {
  items: Array<string>;
  term = new FormControl();
  constructor(private wikipediaService: WikipediaService) {
    this.term.valueChanges
              .debounceTime(400)        // wait for 400ms pause in events
              .distinctUntilChanged()   // ignore if next search term is same as previous
              .subscribe(term => this.wikipediaService.search(term).then(items => this.items = items));
  }
}

Byłoby marnowaniem zasobów, aby wysłać kolejną prośbę o szukanie terminu że nasza aplikacja już pokazuje wyniki dla. Wszystko, co musimy zrobić, aby osiągnąć pożądane zachowanie, to wywołać operator distinctUntilChanged zaraz po wywołaniu debounceTime(400)

Zobacz przykład Obserwowalnej implementacji na Plunker

Aby poradzić sobie z odpowiedziami niezgodnymi z zamówieniem, sprawdź cały artykuł http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

O ile używam Http w Angular, zgadzam się, że w normalnych przypadkach użytkowania nie ma dużej różnicy przy użyciu Observable over Promise. Żadna z zalet nie ma tu znaczenia w praktyce. Mam nadzieję, że zobaczę jakiś zaawansowany przypadek użycia w przyszłości:) [38]}

Dowiedz się więcej

• https://angular-2-training-book.rangle.io/handout/observables/
• https://angular.io/tutorial/toh-pt6#observables

ZARÓWNO Promises jak i Observables pomogą nam pracować z asynchronicznymi funkcjami w JavaScript. Są one bardzo podobne w wielu przypadkach, jednak nadal istnieją pewne różnice między nimi, obietnice są wartościami, które będą rozwiązywać w asynchronous sposoby jak http wywołań. Z drugiej strony, obiekty obserwacyjne zajmują się sekwencją zdarzeń asynchronicznych . Główne różnice między nimi są wymienione poniżej:

Promise:

• posiadanie jednego rurociągu
• zwykle używaj tylko z asynchronicznym zwrotem danych
• nie jest łatwo anulować

Obserwowalne:

• są cancellable
Są z natury poddawane ponownej próbie, takie jak retry i retryWhen.]}
• dane strumieniowe w wielu potokach
• operacje podobne do tablicy, takie jak mapa, filtr itp
• mogą być tworzone z innych źródeł, takich jak zdarzenia
• oni są funkcjami, które mogą być subskrybowane później

Również, stworzyłem graficzny obraz poniżej, aby pokazać różnice wizualnie:

Jest jeden minus spostrzeżeń brak w odpowiedziach. Obietnice pozwalają na korzystanie z funkcji asynchronicznych/oczekujących ES7. Dzięki nim możesz pisać kod asynchroniczny tak, jakby był to synchroniczne wywołanie funkcji, więc nie potrzebujesz już wywołań zwrotnych. Jedyną możliwością dla obserwatorów, aby to zrobić, jest nawrócenie ich na obietnice. Ale kiedy przekonwertujesz je na obietnice, możesz mieć tylko jedną wartość zwracaną ponownie:

async function getData(){
    const data = await observable.first().toPromise();
    //do stuff with 'data' (no callback function needed)
}

Czytaj dalej: Jak mogę " czekać` na Rx obserwowalnym?

Obietnice

1. definicja: pomaga uruchamiać funkcje asynchronicznie i używać ich wartości zwracanych (lub wyjątków), ale tylko raz podczas wykonywania.
2. Nie Leniwy
3. nie można anulować( istnieją Biblioteki Promise, które obsługują anulowanie, ale ES6 Promise do tej pory nie). Dwie możliwe decyzje to
   • Odrzuć
   • Rozwiąż
4. nie może być powtórzona (obietnice powinny mieć dostęp do oryginalnej funkcji to zwróciło obietnicę posiadania możliwości ponownego spróbowania, co jest złą praktyką)

Observables

1. definicja: pomaga uruchamiać funkcje asynchronicznie i używać ich wartości zwrotnych w ciągłej sekwencji (wiele razy) Po wykonaniu.
2. domyślnie jest leniwy, ponieważ emituje wartości w czasie.
3. posiada wiele operatorów, co upraszcza proces kodowania.

4. Jeden operator retry może być użyty do retry, gdy potrzebne, również jeśli musimy ponowić próbę obserwowalną na podstawie pewnych warunków retry when może być użyty.

   Uwaga : lista operatorów wraz z ich interaktywnymi diagramami jest dostępna tutaj:RxMarbles.com

Promises i Observables obsługują tylko asynchroniczne wywołanie.

Oto różnice między nimi:

Obserwowalne

1. emituje wiele wartości przez pewien okres czasu
2. nie jest wywołana, dopóki nie zapiszemy się do Obserwowalnej
3. można anulować za pomocą metody unsubscribe ()
W przeciwieństwie do innych operatorów, nie można ich używać do tworzenia map, filtrowania, zmniejszania, retry i retry when.]}

Promise

1. Emituje tylko a pojedyncza wartość w czasie

2. Dzwoni do służb bez .wtedy i .catch

3. Nie można anulować

4. Nie dostarcza żadnych operatorów

Mimo, że ta odpowiedź jest spóźniona, podsumowałem różnice poniżej,

Obserwowalny:

1. obserwowalny jest tylko function to wymaga an observer i zwraca a function Observer: an object with next, error.
2. Obserwator pozwala na subscribe/unsubscribe do strumienia danych, emitują Następna wartość obserwatora, notify obserwator o errors oraz poinformuj obserwatora o stream completion
3. Obserwator dostarcza function to handle next value,błędy i koniec strumienia (zdarzenia ui,odpowiedzi http, dane z gniazdami sieciowymi).
4. Działa z multiple values over time
5. jest cancel-able/retry-able i obsługuje operatorów takich jak map,filter,reduce itd.
6. Tworzenie obserwowalnego może być -Observable.create() - zwraca obserwowalne, które mogą wywoływać metody na -Observer Observable.from() - konwertuje tablicę lub iterowalną na -Observable Observable.fromEvent() - zamienia Zdarzenie na obserwowalne -Observable.fromPromise() - konwertuje obietnicę do obserwowalnych -Observable.range() - zwraca ciąg liczb całkowitych w podanym zakresie

Obietnica:

1. Obietnica oznacza zadanie, które zakończy się w przyszłości;

2. Obietnice stają się resolved by a value;

3. Obietnice są odrzucane przez wyjątki;

4. Nie cancellable i wraca a single value

5. A promise expose a function (then)

   - następnie zwraca nowy promise;

   - pozwala na attachment z tego będą realizowane na podstawie state;

   -handlers są guaranteed do wykonania w order attached;

Właśnie miałem do czynienia z problemem, w którym obietnice były najlepszym rozwiązaniem, i dzielę się nim tutaj dla każdego, kto natknie się na to pytanie, jeśli będzie przydatne (dokładnie takiej odpowiedzi Szukałem wcześniej): {]}

W projekcie Angular2 mam usługę, która pobiera pewne parametry i zwraca listę wartości, aby wypełnić rozwijane menu w formularzu. Kiedy komponent formularza inicjalizuje, muszę wielokrotnie wywoływać tę samą usługę z różnymi parametrami, aby zdefiniować liczbę różne menu rozwijane, jednak jeśli po prostu ustawię w kolejce wszystkie zmienne, aby wywołać usługę,tylko ostatnia powiedzie się, a reszta błędu. Usługa pobierana z bazy danych może obsługiwać tylko jedno żądanie na raz.

Jedynym sposobem na pomyślne wypełnienie wszystkich zmiennych z menu rozwijanego było wywołanie usługi w sposób uniemożliwiający przetworzenie nowego żądania do czasu zakończenia ostatniego żądania i obietnicy/.następnie mechanizm rozwiązał problem ładnie.

  fetchValueList(listCode): Promise<any> {
      return this.dataSvc.getValueList(listCode, this.stateSvc.currentContext, this.stateSvc.currentLanguageCode)
          .map(response => response.json())
          .toPromise();
  }

  initializeDropDowns() {
      this.fetchValueList('First-Val-List')
          .then(data => {
              this.firstValList = data;
              return this.fetchValueList('Second-Val-List')
          }).then(data => {
              this.secondValList = data;
              return this.fetchValueList('Third-Val-List')
          }).then(data => {
              this.thirdValList = data;
          })  }

Zdefiniowałem funkcje w komponencie, a następnie wywołałem initializeDropDowns () w ngOnInit.

Funkcja fetchValueList zwraca obietnicę, więc pierwsze wywołanie przekazuje pierwszy kod listy i gdy obietnica zostanie rozwiązana, wartość zwracana jest w zmiennej danych w .następnie zablokuj, gdzie możemy przypisać go do tego.pierwsza zmienna. Ponieważ funkcja zwróciła dane, wiemy, że usługa została zakończona i można bezpiecznie zadzwonić ponownie za pomocą drugiego kodu listy, zwracana wartość jest w zmiennej danych w next .następnie blokujemy i przypisujemy go do tego.zmienna secondValList.

Możemy łańcuchować to tyle razy, ile jest to wymagane, aby wypełnić wszystkie zmienne, a na ostatnim bloku kodu po prostu pomijamy instrukcję return i blok kończy się.

Jest to bardzo specyficzny przypadek użycia, w którym mamy jedną usługę, która musi być wywoływana wiele razy podczas inicjalizacji komponentu i gdzie usługa musi zakończyć pobieranie i zwracać wartość, zanim można ją ponownie wywołać, ale w tym przypadku obietnica/.wtedy metoda była idealna.

Uważam, że wszystkie inne odpowiedzi powinny rozwiać twoje wątpliwości. Niemniej jednak, chciałem tylko dodać, że obserwable są oparte na programowaniu funkcyjnym i uważam, że bardzo przydatne są funkcje, które z nim pochodzą, takie jak map, flatmap, reduce, zip. Spójność, którą osiąga sieć, zwłaszcza gdy zależy od żądań API, jest brutalną poprawą.

Zdecydowanie polecam tę dokumentację , ponieważ jest to oficjalna dokumentacja reactiveX i uważam, że jest ona najbardziej przejrzysta tam.

Jeśli chcesz dostać się do obserwatoriów, proponuję ten 3-częściowy post: http://blog.danlew.net/2014/09/15/grokking-rxjava-part-1/

Chociaż jest to przeznaczone dla RxJava, pojęcia są takie same i jest naprawdę dobrze wyjaśnione. W dokumentacji reactiveX masz równoważność dla każdej funkcji. Musisz szukać RxJS.

Obietnica:

• Podaj jedną przyszłą wartość;
• nie leniwy;
• nie można anulować;

Obserwowalny:

• emituje wiele wartości w czasie;
• Lazy;
• Cancellable;
• obsługuje operatory map, filter, reduce i podobne

Możesz używać obietnic zamiast obserwowalnych podczas wywoływania HTTP w języku Angular, jeśli chcesz.

Przegląd:

• obie obietnice i obserwacje pomagają nam radzić sobie z operacjami asynchronicznymi. Mogą wywoływać pewne wywołania zwrotne, gdy te operacje asynchroniczne są wykonywane.
• obietnica może obsłużyć tylko jedno zdarzenie, Obiekty obserwacyjne są dla strumieni zdarzeń w czasie
• obietnic nie można anulować, gdy są oczekujące
• Dane obserwowalne emitowane mogą być przekształcane za pomocą operatorów

Zawsze możesz użyć obserwowalnego do radzenia sobie z asynchronicznymi zachowanie, ponieważ obserwowalne ma wszystkie funkcje, które oferuje obietnica (+extra). Jednak czasami ta dodatkowa funkcjonalność, którą oferują Observables, nie jest potrzebna. Wtedy byłoby dodatkowym obciążeniem zaimportowanie biblioteki, aby mogła z niej korzystać.

Kiedy używać obietnic:

Użyj obietnic, gdy masz pojedynczą operację asynchroniczną, której chcesz przetworzyć wynik. Na przykład:

var promise = new Promise((resolve, reject) => {
  // do something once, possibly async
  // code inside the Promise constructor callback is getting executed synchronously

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

//after the promise is resolved or rejected we can call .then or .catch method on it

promise.then((val) => console.log(val))      // logs the resolve argument
       .catch((val) => console.log(val));    // logs the reject argument

Więc obietnica wykonuje jakiś kod, gdzie albo rozwiązuje, albo odrzuca. Jeśli zostanie wywołany resolve lub reject, obietnica przechodzi z stanu oczekującego do stanu rozwiązanego lub stanu odrzuconego. Gdy stan obietnicy jest rozwiązany, wywoływana jest Metoda then(). Gdy stan obietnicy jest odrzucany, wywoływana jest Metoda catch().

Kiedy używać Obserwabli:

Użyj Obserwabli, gdy istnieje strumień (danych) w czasie, który należy obsłużyć. Strumień jest sekwencją elementów danych, które są wykonane dostępne z czasem . Przykłady strumieni to:

1. zdarzenia Użytkownika, np. click lub keyup. Użytkownik generuje zdarzenia (dane) w czasie.
2. Websockets, po nawiązaniu przez Klienta połączenia WebSocket z serwerem wypycha dane w czasie.

W samym obserwowalnym określa się, kiedy miało miejsce następne zdarzenie , gdy wystąpi błąd , lub gdy obserwowalny jest zakończony . Wtedy możemy zapisać się do tego obserwowalnego, który go aktywuje i w tej subskrypcji możemy przejść w 3 wywołań zwrotnych(nie zawsze musimy przejść we wszystkich). Jedno wywołanie zwrotne do wykonania dla sukcesu, jedno wywołanie zwrotne dla błędu i jedno wywołanie zwrotne do zakończenia. Na przykład:

const observable = Rx.Observable.create(observer => {
  // create a single value and complete
  observer.onNext(1);
  observer.onCompleted();
});

source.subscribe(
  x => console.log('onNext: %s', x),   //  success callback
  e => console.log('onError: %s', e),  //  error callback
  () => console.log('onCompleted')     //  completion callback
 );

// first we log: onNext: 1
//  then we log: onCompleted

Podczas tworzenia obserwowalnego wymaga funkcji zwrotnej, która dostarcza obserwatora jako argument. Na tym obserwatorze, można wtedy wywołać onNext, onCompleted, onError. Wtedy, gdy obserwowalny jest subskrybowany, wywoła odpowiednie wywołania zwrotne przekazane do abonament.

Promise-podaj jedną przyszłą wartość. Nie leniwy . Nie cancel-able. Albo odrzuci,albo rozwiąże.

Observable-podaj wiele przyszłych wartości. Leniwy . Cancel-able . Zapewnia inne metody live map, filtrowanie, zmniejszanie.

Obietnica a obserwowalne podobieństwo pierwsze

1. oba używane do obsługi kodu asynchronicznego.
2. proszę szukać przykładu obietnicy. Konstruktor Promise przekazuje funkcję referencji resolve, która zostanie wywołana, gdy zostanie wywołana z pewną wartością po zakończeniu jakiegoś zadania asynchronicznego.

const promise = new Promise(resolve => {
  setTimeout(() => {
    resolve("Hello from a Promise!");
  }, 2000);
});

promise.then(value => console.log(value));

1. Obserwowalny przykład teraz. Tutaj również przekazujemy funkcję do observable, obserwatora do obsługi zadania asynchronicznego. W przeciwieństwie do rozwiązania w obietnicy ma następujące metody i subskrybuje w miejsce wtedy.

2. Tak więc obie obsługują zadania asynchroniczne. Teraz zobaczmy różnicę.

const observable = new Observable(observer => {
  setTimeout(() => {
    observer.next('Hello from a Observable!');
  }, 2000);
});

observable.subscribe(value => console.log(value));

Obietnica a obserwowalna różnica

Promise

1. rozwiązuje lub odrzuca pojedynczą wartość i może obsługiwać pojedynczą wartość zadania asynchronicznego na raz.
2. obietnica po rozwiązaniu wartości asynchronicznej, którą wypełnia, nie może być już używana.to tylko jednorazowe użycie i tutaj spada krótko.
3. nie można anulować
4. Brak obsługi rxjs dla operatorów.

Obserwowalne

1. możliwość emitowania wielu wartości asynchronicznych.
2. używany do obsługi strumienia zdarzeń lub wartości. Rozważ, że masz tablicę wielu zadań lub wartości i chcesz, aby każda wartość czasu jest wstawiana do tego powinna być obsługiwana automatycznie. Za każdym razem, gdy wciśniesz wartość do tej tablicy, wszyscy jej subskrybenci otrzymają najnowszą wartość automatycznie.
3. obserwacje są przydatne do obserwacji zmian wejściowych, powtarzanych interwałów, wartości transmisji do wszystkich komponentów potomnych, powiadomień push z gniazdem internetowym itp.
4. może zostać anulowana za pomocą metody anulowania subskrypcji w dowolnym momencie.
5. Jeszcze jedna dobra część, która obiecuje, że ma wsparcie dla operatorów rxjs. Masz wielu operatorów rur głównie map, filtrów, switchMap, combineLatest itp. aby przekształcić dane obserwowalne przed subskrybowanie.

Promise emituje pojedynczą wartość, podczas gdy Observable emituje wiele wartości. Tak więc, podczas obsługi żądania HTTP, Promise może zarządzać pojedynczą odpowiedzią na to samo żądanie, ale co jeśli istnieje wiele odpowiedzi na to samo żądanie, to musimy użyć Observable. Tak, Observable może obsłużyć wiele odpowiedzi dla tego samego żądania.

Promise

const promise = new Promise((data) =>
{ data(1);
  data(2);
  data(3); })
.then(element => console.log(‘Promise ‘ + element));

Wyjście

Promise 1

Obserwowalne

const observable = new Observable((data) => {
data.next(1);
data.next(2);
data.next(3);
}).subscribe(element => console.log('Observable ' + element));

Wyjście

Observable 1
Observable 2
Observable 3

Obietnica emituje pojedyncze zdarzenie, gdy działanie asynchroniczne zakończy się lub zawiedzie.

Obserwowalny jest jak strumień (w wielu językach) i pozwala przekazać co najmniej zero lub więcej zdarzeń, gdzie callback jest wymagany dla każdego zdarzenia.

Często obserwowalne jest preferowane niż obietnica, ponieważ daje najważniejsze zalety obietnicy i więcej. W przypadku Observable nie ma znaczenia, czy musisz obsługiwać 0, 1, Czy różne zdarzenia. Możesz użyć podobnego API dla każdego case.

Obietnica: promise emituje pojedynczą wartość

Na przykład:

const numberPromise = new Promise((resolve) => {
    resolve(5);
    resolve(10);
});

numberPromise.then(value => console.log(value));
// still prints only 5

Obserwowalny: Emituje wiele wartości w czasie

Na przykład:

  const numberObservable = new Observable((observer) => {
        observer.next(5);
        observer.next(10);
    });

numberObservable.subscribe(value => console.log(value));
// prints 5 and 10

Możemy myśleć o obserwowalnym jak strumień, który emituje wiele wartości w danym okresie czasu i ta sama funkcja zwrotna jest wywoływana dla każdego emitowanego elementu, więc z obserwowalnym możemy użyć tego samego API do obsługi danych asynchronicznych. czy dane te są przesyłane jako pojedyncza wartość lub wiele wartości w pewnym odcinku czasu.

Obietnica:

• obietnica nie jest leniwa
• obietnica nie może zostać anulowana

Obserwowalne:

• obserwowalny jest leniwy. "Obserwowalne" jest powolne. Nazywa się go dopiero zapisaliśmy się na nią.
Można ją anulować za pomocą metody unsubscribe ().]}
• dodawanie obserwowalne zapewnia wiele potężnych operatorów, takich jak mapka, foreach, filter, reduce, retry, retry when itp.

Kątowe obietnice vs obserwowalne

Obie obietnice i obserwacje pomagają nam radzić sobie z asynchronicznymi szef. Mogą wywoływać pewne wywołania zwrotne, gdy te asynchroniczne operacje zakończone.

Angular używa Obserwabli, które są z RxJS zamiast obietnic do czynienia z HTTP

Below are some important differences in promises & Observables.

Krótka odpowiedź:

Obserwowalne jest lepiej, posiada wszystkie obietnice funkcje plus dodatkowe funkcje.

Długa odpowiedź:

Obietnice:

• jednorazowo użyj "zwróć dane raz"
• no cancel
• jeden słuchacz
• No Socket Support One Listener

Obserwowalne:

• zwracaj dane wiele razy podczas zmiany danych
• wsparcie anuluj
• Gniazdo podporowe
• Obsługa wielu słuchaczy i powiadamianie ich o zmianie danych
• Mapa wsparcia, filtr, redukcja

Poniżej przedstawiamy kilka istotnych różnic w obietnicach i obserwacjach.

Promise

• emituje tylko jedną wartość
• nie można anulować
• Not sharable
• zawsze asynchroniczny

Obserwowalne

• emituje wiele wartości
• wykonuje tylko wtedy, gdy jest wywołana lub ktoś subskrybuje
• można anulować
• może być współdzielona i subskrybowana przez wielu subskrybentów. A wszyscy subskrybenci wykonają w jednym punkcie czasu.
• Prawdopodobnie asynchroniczne

Dla lepszego zrozumienia patrz https://stackblitz.com/edit/observable-vs-promises

Chociaż ogólnie przyjęta odpowiedź jest dobra, nie sądzę, aby podkreślała ona, że w przypadku elementów kątowych prawie zawsze chcesz użyć obserwowalnego, ponieważ obsługuje anulowanie. Obietnice nie mogą zostać anulowane i zostaną rozwiązane, nawet jeśli twój komponent zostanie zniszczony. Angular ma tendencję do wybaczania, dopóki nie jest.

Na przykład każde ręczne wykrycie zmiany zniszczonego komponentu spowoduje wyjątek:

ngOnInit() {
  // promise api
  this.service.getData().then(d => {
     this.data = d;
     this.changeDetectorRef.detectChanges();
  });

  // observable api
  this.service.getData().pipe(takeUntil(this.unsubscribe)).subscribe((d) => {
     this.data = d;
     this.changeDetectorRef.detectChanges();
  });
}

Jeśli twój komponent zostanie zniszczony przed obietnicą gdy obietnica zostanie rozwiązana, pojawi się błąd attempt to use destroyed view.

Alternatywnie, jeśli używasz obserwabli ze wzorem takeUntil , to jak tylko twój komponent zostanie zniszczony, subskrypcja zostanie anulowana.

Jest to trochę wymyślony przykład, ale wykonanie kodu dla zniszczonego komponentu prawdopodobnie doprowadzi do błędów. Chyba, że faktycznie chcesz to zrobić z jakiegoś powodu: P

Obietnica:

Asynchroniczna Obsługa zdarzeń - obiekt Promise reprezentuje ostateczne zakończenie (lub niepowodzenie) operacji asynchronicznej i jej wartość wynikową.

Składnia: new Promise (executor);

Eg:

var promise_eg = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise_eg.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

console.log(promise_eg);

O Obietnicy: Ma jeden potok, więc zwróci wartości tylko raz, gdy zostanie wywołany. jego obsługa w jeden sposób, więc po wywołaniu może nie być w stanie anulować. przydatna składnia, którą możesz odtwarzać around, when () and then()

Obserwowalne:

Obserwowalne są leniwymi zbiorami wielu wartości w czasie. to naprawdę świetne podejście do operacji asynchronicznych. można to zrobić za pomocą rxjs, który ma wsparcie dla wielu platform, może być używany z angular/react itp.

Składnia: import * as Rx from "@reactivex/rxjs"; do init:

Rx.Observable.fromEvent(button, "click"),
Rx.Subject()

Etc

Aby subskrybować: RxLogger.getInstance();

Eg:

import { range } from 'rxjs';
import { map, filter } from 'rxjs/operators';

range(1, 200).pipe(
  filter(x => x % 2 === 1),
  map(x => x + x)
).subscribe(x => console.log(x));

Ponieważ obsługuje wiele potoków, możesz subskrybować wyniki w innej lokalizacji, ma wiele możliwości niż obietnice.

Sposób użycia: ma więcej możliwości jak map, filter, pipe, map, concatMap etc

Coś, na co natknąłem się, co nie było widoczne z pierwszego czytania samouczka i dokumentów, to idea multicastingu.

Upewnij się, że wiesz, że domyślnie wiele subskrypcji spowoduje wiele egzekucji w obserwowalnym. Wiele subskrypcji do jednego połączenia HTTP Observable wywoła wiele identycznych połączeń HTTP, chyba że .share() (włączyć multicasting).

Obietnica zmusza cię do radzenia sobie z jedną rzeczą na raz, rozpakowania jej danych, obsługi wyjątków, ma wsparcie językowe dla fajnych rzeczy, takich jak asynchroniczne / oczekujące, i jest całkiem barebones inaczej.

Obserwowalny ma wiele bajerów i gwizdków, ale musisz zrozumieć moc, z którą pracujesz, albo może zostać niewłaściwie wykorzystany.

Widzę, że wiele osób używa argumentu, że Observable są "cancellable", ale jest to raczej trywialne, aby obiecać "cancellable"

function cancellablePromise(body) {
  let resolve, reject;
  const promise = new Promise((res, rej) => {
    resolve = res; reject = rej;
    body(resolve, reject)
  })
  promise.resolve = resolve;
  promise.reject = reject;
  return promise
}

// Example 1: Reject a promise prematurely
const p1 = cancellablePromise((resolve, reject) => {
  setTimeout(() => resolve('10', 100))
})

p1.then(value => alert(value)).catch(err => console.error(err))
p1.reject(new Error('denied')) // expect an error in the console

// Example: Resolve a promise prematurely
const p2 = cancellablePromise((resolve, reject) => {
  setTimeout(() => resolve('blop'), 100)
})

p2.then(value => alert(value)).catch(err => console.error(err))
p2.resolve(200) // expect an alert with 200

Spostrzeżenia są często porównywane do obietnic. Oto kilka kluczowych różnic:

Obserwacje są deklaratywne; obliczenia zaczynają się dopiero po subskrypcji. Obietnice wykonywane są natychmiast po utworzeniu. To sprawia, że obiekty obserwacyjne są przydatne do definiowania receptur, które można uruchamiać, gdy tylko potrzebujesz wyniku.

Obiekty obserwacyjne dostarczają wielu wartości. Obietnice zapewniają jeden. To sprawia, że obserwable są przydatne do uzyskiwania wielu wartości w czasie.

Obserwowalne rozróżnienie między łańcuchami i abonament. Tylko obietnice mają .then () klauzule. To sprawia, że obserwable są przydatne do tworzenia złożonych receptur transformacji, które mogą być używane przez inne części systemu, bez powodowania wykonywania pracy.

Observables subscribe() odpowiada za obsługę błędów. Obietnice popychają błędy do obietnic dziecka. Dzięki temu obiekty obserwacyjne są przydatne do scentralizowanej i przewidywalnej obsługi błędów.

To najprostsza różnica jaką można znaleźć na ANGULAR.IO docs. odpoczynek odpowiedź jest udzielana przez większość jest poprawna we własnym miejscu

1. obietnica jest chętna, podczas gdy obserwowalna jest leniwa,
2. obietnica jest zawsze asynchroniczna, podczas gdy obserwowalna może być albo synchroniczne lub asynchroniczne,
3. obietnica może dostarczyć jedną wartość, podczas gdy obserwowalna jest
   strumień wartości (od 0 do wielu wartości),
4. Możesz zastosować operatory RxJS do obserwowalnego, aby uzyskać nowy dostosowany strumień.

Podstawowa różnica między obserwowalnymi a obietnicami to:

1. Obietnice są skupione tylko dla pojedynczych wartości lub rozwiązań, obserwowalne są strumieniem danych.

2. Obserwacje można anulować, ale obietnic nie można anulować.

Najmniej znany, przynajmniej dla mnie jest

Obietnice są zawsze asynchroniczne, ale obserwowalne mogą być zarówno synchroniczne, jak i asynchroniczne.

W skrócie, główne różnice między obietnicą A obietnicą Obserwowalną są następujące:

Obietnica jest pożądana, podczas gdy obserwowalna jest leniwa.]} Obietnica jest zawsze asynchroniczna, podczas gdy obserwowalna może być zarówno synchroniczna, jak i asynchroniczna.]} Przyrzeczenie może dostarczyć jedną wartość, podczas gdy obserwowalne jest strumieniem wartości (od 0 do wielu wartości),
• Możesz zastosować operatory RxJS do obserwowalnego, aby uzyskać nowy, dopasowany strumień.

Bardziej szczegółowe informacje można znaleźć w ten artykuł

Promise

Obietnica obsługuje pojedyncze zdarzenie, gdy operacja asynchroniczna zakończy się lub nie powiedzie.

Uwaga: istnieją Biblioteki Promise, które obsługują anulowanie, ale ES6 Promise do tej pory nie.

Obserwowalne

Obserwowalny jest jak strumień (w wielu językach) i pozwala przekazać zero lub więcej zdarzeń, w których wywołanie zwrotne jest wywoływane dla każdego zdarzenia.

Jest już wiele odpowiedzi na ten temat, więc nie dodałbym zbędnej.

Ale dla kogoś, kto dopiero zaczął się uczyć / Angular i zastanawia się, którego z nich użyć porównaj z Promise , polecam zachować wszystko obserwowalne i przekształcić wszystkie istniejące obietnice w projekcie do obserwowalnych.

Po prostu dlatego, że sam Framework Angular i jego społeczność używają obserwowalnych. Więc byłoby to korzystne, gdy integruj usługi framework lub Moduły innych firm i łącz wszystko razem.

Chociaż doceniam wszystkie downvoty, ale nadal nalegam na moją opinię powyżej, chyba że ktoś umieści odpowiedni komentarz, aby wymienić kilka scenariuszy, które mogą być nadal przydatne w Twoim projekcie Angular, aby użyć obietnic zamiast obserwowalnych.

Oczywiście, żadna opinia nie jest w 100% poprawna we wszystkich przypadkach, ale przynajmniej uważam, że 98% czasu na regularne projekty komercyjne realizowane w ramach Angular, Observable jest właściwą drogę.

Nawet jeśli nie podoba Ci się to na początku twojego prostego projektu hobbystycznego, wkrótce zdasz sobie sprawę, że prawie wszystkie komponenty, z którymi współdziałasz w grze Angular, a większość przyjaznych Frameworkom 3rd party korzysta z Observables, a następnie będziesz stale konwertować swoją obietnicę do Observable, aby się z nimi komunikować.

Komponenty te obejmują między innymi: HttpClient, Form builder, Moduły/okna dialogowe Angular material, Ngrx store / effects i ngx-bootstrap.

W rzeczywistości, jedyną obietnicą z Angular eco-system miałem do czynienia w ciągu ostatnich 2 lat jest APP_INITIALIZER.

Observables i Promises pomagają nam pracować z asynchronicznymi funkcjami w JavaScript / typescript. Są one bardzo podobne w wielu przypadkach, jednak nadal istnieją pewne różnice między nimi.