Promise vs Observable

Obietnice:

• zwraca pojedynczą wartość
• nie można anulować
• bardziej czytelny kod z try / catch i asynchronicznym / wait

Obserwowani:

• Praca z wieloma wartościami w czasie
• cancellable
• obsługa map, filtrów, redukcji i podobnych operatorów
• Użyj Reactive Extensions (RxJS)
• tablica, której elementy przybywają asynchronicznie w czasie

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 są wymienione jako poniżej:

Promise:

• mając jedną rurę
• zwykle używaj tylko z asynchronicznym zwrotem danych
• nie jest łatwo anulować

Obserwowalne:

• są cancellable
Są one z natury odzyskiwalne, takie jak retry i retryWhen [20]}
• dane strumieniowe w wielu przewodach rurowych
• operacje podobne do tablicy, takie jak mapa, filtr itp
• mogą być tworzone z innych źródeł, takich jak zdarzenia
• oni funkcja are, która może być później subskrybowana

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

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
Nie można anulować. Dwie możliwe decyzje to

• Odrzuć
• Rozwiąż

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 ponownej próby, gdy jest to kiedykolwiek potrzebne, również wtedy, gdy 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

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?

Promises i Observable obsługują tylko asynchroniczne wywołanie.znajdź powyżej obraz dla głównej różnicy.

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 obserwowanych proponuję ten 3part 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 odpowiedniki dla każdej funkcji. Musisz szukać RxJS.

Mam nadzieję, że to pomoże, po prostu próbowałem przyczynić się tutaj. :)

Observables vs Promises

Promises i Observables ,oba zapewniają nam prosty sposób, który pomaga nam zmagać się z próbami asynchronicznego charakteru naszych aplikacji. Istnieją jednak istotne różnice między nimi:

• Obiekty obserwacyjne mogą definiować zarówno aspekty konfiguracji, jak i tearddown zachowania asynchronicznego.
• obserwowalne można anulować.
• ponadto, obserwowalne mogą być powtórzone przy użyciu jednego z operatorów retry dostarczonych przez API, takich jak retry i retryWhen. Z drugiej strony, obietnice wymagają, aby wywołujący miał dostęp do oryginalnej funkcji, która zwróciła obietnicę, aby mieć możliwość ponownego spróbowania.

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

numberPromise.then(value => console.log(value));
// will simply print 5

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

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

Przeciwnie, Obserwable pozwalają rozwiązać (lub, jak mówimy, "emitować") wiele wartości. Oto jak by to wyglądało:

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

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

Zauważ jak podobna jest składnia-zamieniliśmy funkcję Promise na Obserwowalną, zastąpiliśmy funkcję resolve na observer.następne wywołanie i zamiast tego używane subscribe, który zachowuje się bardzo podobnie.

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.

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.

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 mogą być przekształcane za pomocą operatorów

Zawsze możesz użyć obserwowalnego do radzenia sobie z asynchronicznymi zachowanie, ponieważ obserwowalne ma funkcjonalność obietnicy. Jednak czasami ta dodatkowa funkcjonalność, którą oferują Observables, nie jest potrzebna. Wtedy byłoby dodatkowym obciążeniem zaimportowanie biblioteki do niej w celu jej użycia.

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żeli: rozwiązanie lub odrzucenie nazywa się obietnicą przechodzącą ze stanu oczekującego do stanu rozwiązanego lub 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żywaj Obserwabli, gdy istnieje strumień w czasie, który musisz obsłużyć. W samym obserwowalnym określa się, kiedy miało miejsce następne zdarzenie, kiedy wystąpi błąd, lub gdy Obserwowalne jest zakończone. Następnie możemy zapisać się do tego obserwable, który aktywuje go i w tej subskrypcji możemy przejść w 3 wywołań zwrotnych(nie zawsze trzeba 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 wówczas wywołać onNext, onCompleted, onError. Wtedy, gdy obserwowalne jest subskrybowany do niego wywoła odpowiednie wywołania zwrotne przekazane do subskrypcji.

Observables i Promises zapewniają środki do pracy z async działań w JavaScript. Podczas gdy Odrzuć/rozwiąż w oparciu o zakończenie pojedynczego zdarzenia asynchronicznego (żądanie http), Obserwable mogą w sposób ciągły emitować zmiany w stanie w oparciu o obserwatorów, którzy je subskrybują.

Podstawową różnicą między nimi jest to, że obserwowalne zapewniają sposoby anulowania żądania i ponownego wysłania Nowego. Gdzie jako obietnica nie pozwalają na takie cecha.

Również Promise emituje jedną 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.

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

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.

Wyjaśnij w odniesieniu do kątowych wywołań Http dla zdalnego Api: Promises służy do utrzymania stanu wywołań asynchronicznych. jeden dane są pobierane ze zdalnego Api i wyświetlane w widoku

I w obserwowalne pochodzą z obserwowalnego wzorca i wprowadzają przez Rxjs, gdy daje Ci możliwość wielokrotnego aktualizowania danych w całym strumieniu jako obserwowalne dane.