The difference between promise and observable

StackOverflow Discussion on ：What is the difference between Promises and Observables?

The most praised answer ：1777 Fabulous

When an asynchronous operation completes or fails ,Promise A single event is processed .

Be careful ： Yes Promise Library support cancellation operation , but ES6 Promise So far, it does not support .

Observable

One Observable Like a Stream（ In many languages ）, Allow zero or more events to be passed , Where the callback... Is called for each event .

Usually Observable Than Promise More popular , Because it provides Promise The characteristics of . Use Observable, Do you want to deal with 0、1 Or more events are not important . You can use the same... In each case API.

Observable Also ratio Promise Have the advantage of canceling . If the server is no longer needed HTTP The result of a request or some other expensive asynchronous operation ,Observable Your subscription allows you to unsubscribe , and Promise Eventually, successful or failed callbacks will be called , Even if you don't do this, you no longer need to notify or provide results .

although Promise It will start immediately , but Observable It will only start when you subscribe to it . That's why Observable The reason called laziness .

Observable Provides map、forEach、reduce Equal operator , Usage is similar to array .

There are also some powerful operators , Such as retry() or replay() etc. , They are usually very convenient .

Deferred execution allows execution through subscriptions observable Before you create a series of operators , For more declarative programming .

The second answer ：374 Fabulous

Illustrate with examples .

Angular Use Rx.js Observables instead of promises To deal with it HTTP.

Suppose you are building a search function , This function should immediately display the results as you type . That sounds familiar , But this task will bring many challenges .

We don't want to access the server endpoint every time a user presses a key , If you do , The server will be heavily HTTP Request flooding . Basically , We just want to trigger... After the user stops typing HTTP request , Instead of triggering each keystroke .

For subsequent requests , Do not use the same query parameters to access the search endpoint .

Handle unordered responses . When we have multiple requests in progress at the same time , We must consider the case where they return in an unexpected order . Imagine , Let's first type computer, stop it , Request , Then type. car, stop it , Request . Now we have two ongoing requests . Unfortunately , Bring the results to computer The request carries the result to car After your request, return .

First, let's see how to use it promise To achieve this requirement . Of course , All the border cases mentioned above have not been dealt with .

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]);  }}

We are injecting Jsonp service , To use the given search term pair Wikipedia API issue GET request . Please note that , We call toPromise It's to start from Observable<Response> To Promise<Response>. With a final Promise<Array<string>> As the return type of our search method .

app.ts The implementation of the ：

// check the plnkr for the full list of importsimport {...} 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);  }}

There's no surprise here . We inject our WikipediaService And disclose its functions to the template through the search method . The template is simply bound to keyup And call search(term.value).

Let's untie WikipediaService The search method returns Promise Result , And expose it to the template as a simple string array , So we can make *ngFor Loop through it and build a list for us .

Where Observables really shine

Let's change our code , Don't tap the endpoint every time you hit the key , But only when the user stops typing 400 Send request in milliseconds

To reveal such superpowers , We need to get one first Observable<string> , It carries the search terms entered by the user . We can use Angular Of formControl Instructions , Instead of manually binding to keyup event . To use this command , We first need to ReactiveFormsModule Import into our application module .

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 {}

After import , We can use... In the template formControl And set it to the name “term”.

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

In our component , We from @angular/form Created a FormControl Example , And expose it as the name on the component term Next field .

Behind the scenes ,term Automatically expose a Observable<string> As an attribute we can subscribe to valueChanges. Now we have one Observable<string>, Getting user input is like in our Observable On the call debounceTime(400) It's as simple as . This will return a new Observable<string>, It will only 400 Issue a new value only when no new value appears in milliseconds .

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));  }}

It would be a waste of resources to make another request for a search term that our application has displayed results . In order to achieve the desired behavior , All we have to do is call debounceTime(400) Call immediately after distinctUntilChanged Operator .

Observable and promise Comparison ：