Apa perbedaan antara Janji dan Observable?

Apa perbedaan antara Promisedan Observabledi Angular?

Contoh pada masing-masing akan membantu dalam memahami kedua kasus. Dalam skenario apa kita bisa menggunakan setiap kasing?

Janji

A Promisemenangani satu peristiwa ketika operasi async selesai atau gagal.

Catatan: Ada Promiseperpustakaan di luar sana yang mendukung pembatalan, tetapi ES6 Promisetidak sejauh ini.

Tampak

An Observableseperti a Stream(dalam banyak bahasa) dan memungkinkan untuk melewatkan nol atau lebih peristiwa di mana panggilan balik dipanggil untuk setiap peristiwa.

Seringkali Observablelebih disukai daripada Promisekarena menyediakan fitur Promisedan banyak lagi. Dengan Observableitu tidak masalah jika Anda ingin menangani 0, 1, atau beberapa peristiwa. Anda dapat menggunakan API yang sama di setiap kasus.

Observablejuga memiliki kelebihan Promiseuntuk dibatalkan . Jika hasil permintaan HTTP ke server atau operasi async lain yang mahal tidak diperlukan lagi, maka Subscriptiondari itu Observablememungkinkan untuk membatalkan langganan, sementara pada Promiseakhirnya akan memanggil panggilan balik yang berhasil atau gagal meskipun Anda tidak memerlukan pemberitahuan atau hasil yang diberikannya lagi.

Diamati menyediakan operator seperti map, forEach, reduce, ... mirip dengan array

Ada juga operator yang kuat seperti retry(), atau replay(), ... yang seringkali cukup berguna.

Keduanya Promisesdan Observablesmemberi kami abstraksi yang membantu kami menangani sifat asinkron aplikasi kami. Perbedaan di antara mereka ditunjukkan dengan jelas oleh @ Günter dan @Relu.

Karena cuplikan kode bernilai ribuan kata, lepaskan contoh di bawah ini untuk lebih mudah memahaminya.

Terima kasih @Christoph Burgdorf untuk artikel yang luar biasa ini

Angular menggunakan Rx.js Observables alih-alih janji untuk berurusan dengan HTTP.

Misalkan Anda sedang membangun fungsi pencarian yang seharusnya langsung menampilkan hasil saat Anda mengetik. Terdengar akrab tetapi ada banyak tantangan yang datang dengan tugas itu.

• Kami tidak ingin mencapai titik akhir server setiap kali pengguna menekan tombol, itu akan membanjiri mereka dengan badai HTTPpermintaan. Pada dasarnya, kami hanya ingin menekannya setelah pengguna berhenti mengetik bukan dengan setiap penekanan tombol.
• Jangan tekan titik akhir pencarian dengan parameter permintaan yang sama untuk permintaan berikutnya.
• Menangani tanggapan yang tidak sesuai pesanan. Ketika kami memiliki beberapa permintaan dalam penerbangan pada saat yang sama, kami harus memperhitungkan kasus di mana mereka kembali dalam urutan yang tidak terduga. Bayangkan kita pertama-tama mengetik komputer , berhenti, permintaan padam, kita ketik mobil , berhenti, permintaan padam. Sekarang kami memiliki dua permintaan dalam penerbangan. Sayangnya, permintaan yang membawa hasil untuk komputer kembali setelah permintaan yang membawa hasil untuk mobil .

Demo hanya akan terdiri dari dua file: app.tsdan wikipedia-service.ts. Dalam skenario dunia nyata, kita kemungkinan besar akan memecah hal-hal lebih lanjut.

Di bawah ini adalah implementasi berbasis janji yang tidak menangani kasus tepi yang dijelaskan.

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

Kami menyuntikkan Jsonplayanan untuk membuat GETpermintaan terhadap Wikipedia API dengan istilah pencarian yang diberikan. Perhatikan bahwa kami menelepon toPromiseuntuk mendapatkan dari a Observable<Response>ke a Promise<Response>. Akhirnya berakhir dengan Promise<Array<string>>sebagai jenis pengembalian metode pencarian kami.

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

Tidak terlalu mengejutkan di sini. Kami menyuntikkan WikipediaServicedan mengekspos fungsionalitasnya melalui metode pencarian ke templat. Template hanya mengikat keyup dan panggilan search(term.value).

Kami membuka hasil dari Janji bahwa metode pencarian dari Layanan Wikipedia kembali dan mengeksposnya sebagai array sederhana string ke template sehingga kami dapat memiliki *ngForloop melalui itu dan membangun daftar untuk kami.

Lihat contoh implementasi berbasis Janji pada Plunker

Di mana diamati benar-benar bersinar

Mari kita mengubah kode kita untuk tidak memalu titik akhir dengan setiap penekanan tombol tetapi alih-alih hanya mengirim permintaan ketika pengguna berhenti mengetik 400 ms

Untuk mengungkap kekuatan super seperti itu, pertama-tama kita perlu mendapatkan Observable<string>yang membawa istilah pencarian yang diketikkan pengguna. Daripada mengikat secara manual ke acara keyup, kita bisa mengambil keuntungan dari formControlarahan Angular . Untuk menggunakan arahan ini, pertama-tama kita perlu mengimpor ReactiveFormsModuleke dalam modul aplikasi kita.

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

Setelah diimpor, kita bisa menggunakan formControl dari dalam template kita dan mengaturnya ke nama "term".

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

Dalam komponen kami, kami membuat turunan FormControldari @angular/formdan memaparkannya sebagai bidang di bawah istilah nama pada komponen kami.

Di belakang layar, istilah secara otomatis menampilkan Observable<string>properti sebagai tempat valueChangeskami dapat berlangganan. Sekarang kita memiliki Observable<string>, mengatasi input pengguna semudah memanggil debounceTime(400)kita Observable. Ini akan mengembalikan yang baru Observable<string>yang hanya akan mengeluarkan nilai baru ketika belum ada nilai baru untuk 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));
  }
}

Ini akan menjadi pemborosan sumber daya untuk mengirimkan permintaan lain untuk istilah pencarian yang sudah ditunjukkan oleh aplikasi kami. Yang harus kita lakukan untuk mencapai perilaku yang diinginkan adalah memanggil distinctUntilChangedoperator tepat setelah kita menelepondebounceTime(400)

Lihat contoh implementasi yang dapat diamati pada Plunker

Untuk berurusan dengan tanggapan yang tidak sesuai pesanan, silakan periksa artikel lengkap http://blog.thoughtram.io/angular/2016/01/06/mengambil manfaat

Sejauh saya menggunakan Http di Angular, saya setuju bahwa dalam kasus penggunaan normal tidak ada banyak perbedaan ketika menggunakan Observable over Promise. Tidak ada keuntungan yang benar-benar relevan di sini dalam praktiknya. Semoga saya bisa melihat beberapa use case lanjutan di masa depan :)

Belajarlah lagi

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

Baik Janji dan Pengamatan akan membantu kami bekerja dengan fungsi asinkron dalam JavaScript. Mereka sangat mirip dalam banyak kasus, namun, masih ada beberapa perbedaan antara keduanya juga, janji adalah nilai yang akan diselesaikan dengan asynchronouscara seperti panggilan http . Di sisi lain, yang dapat diamati berurusan dengan urutan peristiwa asinkron . Perbedaan utama di antara mereka tercantum di bawah ini:

janji:

• memiliki satu saluran pipa
• biasanya hanya digunakan dengan pengembalian data async
• tidak mudah dibatalkan

tampak:

• dapat dibatalkan
• secara alami dapat diuji ulang seperti coba lagi dan coba lagi
• mengalirkan data dalam banyak saluran pipa
• memiliki operasi seperti array seperti peta, filter dll
• dapat dibuat dari sumber lain seperti acara
• mereka adalah fungsi, yang bisa berlangganan nanti

Juga, saya telah membuat gambar grafis untuk Anda di bawah ini untuk menunjukkan perbedaan secara visual:

Janji

1. Definisi: Membantu Anda menjalankan fungsi secara tidak sinkron, dan menggunakan nilai balik (atau pengecualian) tetapi hanya sekali ketika dijalankan.
2. Tidak malas
3. Tidak dapat dibatalkan (Ada perpustakaan Promise di luar sana yang mendukung pembatalan, tetapi ES6 Promise tidak sejauh ini). Dua keputusan yang mungkin adalah
   • Menolak
   • Menyelesaikan
4. Tidak dapat dicoba lagi (Janji harus memiliki akses ke fungsi asli yang mengembalikan janji untuk memiliki kemampuan coba lagi, yang merupakan praktik buruk)

Dapat diobservasi

1. Definisi: Membantu Anda menjalankan fungsi secara tidak sinkron, dan menggunakan nilai baliknya dalam urutan berkelanjutan ( beberapa kali ) saat dijalankan.
2. Secara default, ini Malas karena memancarkan nilai ketika waktu berjalan.
3. Memiliki banyak operator yang menyederhanakan upaya pengkodean.

4. Satu operator coba lagi dapat digunakan untuk mencoba lagi kapan pun diperlukan, juga jika kita perlu mencoba lagi berdasarkan pada beberapa kondisi coba lagi.

   Catatan : Daftar operator beserta diagram interaktifnya tersedia di sini di RxMarbles.com

Ada satu kelemahan dari Observables yang hilang dalam jawaban. Janji memungkinkan untuk menggunakan fungsi async / menunggu ES7. Dengan mereka Anda dapat menulis kode asinkron seperti itu akan menjadi panggilan fungsi sinkron, sehingga Anda tidak perlu panggilan balik lagi. Satu-satunya kemungkinan bagi Observable untuk melakukan ini, adalah mengubahnya menjadi Janji. Tetapi ketika Anda mengonversinya menjadi Janji, Anda hanya dapat memiliki satu nilai kembali:

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

Bacaan lebih lanjut: Bagaimana saya bisa `menunggu` pada Rx Observable?

Janji dan Pengamatan keduanya hanya menangani panggilan tidak sinkron.

Inilah perbedaan di antara mereka:

Tampak

1. Memancarkan banyak nilai selama periode waktu tertentu
2. Tidak dipanggil sampai kita berlangganan Observable
3. Dapat dibatalkan dengan menggunakan metode berhenti berlangganan ()
4. Menyediakan peta, untuk setiap, menyaring, mengurangi, coba lagi, dan coba lagi ketika operator

Janji

1. Hanya memancarkan nilai tunggal pada satu waktu

2. Memanggil layanan tanpa .then dan .catch

3. Tidak bisa dibatalkan

4. Tidak menyediakan operator apa pun

Meskipun jawaban ini terlambat, saya telah merangkum perbedaan di bawah ini,

Tampak:

1. Diamati hanya functionyang mengambil an observerdan mengembalikan a function Observer: an object with next, error.
2. Pengamat memungkinkan untuk subscribe/unsubscribealiran datanya, memancarkan nilai berikutnya kepada pengamat, notifypengamat tentang errorsdan menginformasikan pengamat tentangstream completion
3. Pengamat menyediakan function to handle next value, kesalahan dan akhir aliran (ui peristiwa, tanggapan http, data dengan soket web).
4. Bekerja dengan multiple valuesseiring waktu
5. Ini cancel-able/retry-abledan mendukung operator seperti map,filter,reducedll.
6. Membuat Observable dapat - Observable.create()- mengembalikan Observable yang dapat memanggil metode pada - Observer Observable.from()- Mengubah array atau iterable menjadi - Observable Observable.fromEvent()- Mengubah event menjadi Observable - Observable.fromPromise()- Mengubah Promise menjadi Observable - Observable.range()- Mengembalikan urutan bilangan bulat dalam rentang yang ditentukan

Janji :

1. Janji merupakan tugas yang akan selesai di masa depan;

2. Janji menjadi resolved by a value;

3. Janji ditolak dengan pengecualian;

4. Tidak cancellabledan itu kembalia single value

5. Sebuah janji memperlihatkan suatu fungsi (then)

   -Kemudian mengembalikan yang baru promise;

   -memungkinkan untuk attachmentitu akan dieksekusi berdasarkan state;

   - handlersadalah guaranteeduntuk mengeksekusi di order attached;

Saya baru saja berurusan dengan masalah di mana Janji adalah solusi terbaik, dan saya membagikannya di sini untuk siapa saja yang menemukan pertanyaan ini seandainya bermanfaat (inilah jawaban yang saya cari sebelumnya):

Dalam proyek Angular2 saya memiliki layanan yang mengambil beberapa parameter dan mengembalikan daftar nilai untuk mengisi menu drop down pada formulir. Ketika komponen formulir diinisialisasi, saya perlu memanggil layanan yang sama beberapa kali dengan parameter yang berbeda untuk menentukan sejumlah menu dropdown yang berbeda, namun jika saya cukup mengantri semua variabel untuk memanggil layanan, hanya yang terakhir berhasil dan kesalahan sisanya di luar. Layanan yang diambil dari basis data hanya dapat menangani satu permintaan pada satu waktu.

Satu-satunya cara untuk berhasil mengisi semua variabel menu dropdown adalah dengan memanggil layanan dengan cara yang mencegah permintaan baru dari diproses sampai permintaan terakhir selesai, dan mekanisme Janji / .Kemudian memecahkan masalah dengan baik.

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

Saya mendefinisikan fungsi-fungsi dalam komponen, dan kemudian memanggil initializeDropDowns () di ngOnInit.

Fungsi fetchValueList mengembalikan Promise, jadi panggilan pertama melewati listCode pertama dan ketika Promise terselesaikan, nilai return ada di variabel data di blok .then di mana kita bisa menugaskannya ke variabel this.firstValList. Karena fungsi telah mengembalikan data, kami tahu layanan telah selesai dan aman untuk menelepon lagi dengan kode list kedua, nilai kembali ada di variabel data di blok .then berikutnya dan kami menetapkannya ke variabel this.secondValList.

Kita dapat rantai ini sebanyak yang diperlukan untuk mengisi semua variabel, dan pada blok kode terakhir kita cukup menghilangkan pernyataan kembali dan blok berakhir.

Ini adalah kasus penggunaan yang sangat spesifik di mana kami memiliki layanan tunggal yang perlu dipanggil beberapa kali saat komponen diinisialisasi, dan di mana layanan harus menyelesaikan pengambilan dan mengembalikan nilai sebelum dapat dipanggil lagi, tetapi dalam kasus ini, Metode Janji / .itu ideal.

Saya percaya semua jawaban lain harus menghapus keraguan Anda. Namun demikian, saya hanya ingin menambahkan bahwa observable didasarkan pada pemrograman fungsional, dan saya merasa sangat berguna fungsi-fungsi yang menyertainya seperti peta, peta datar, pengurangan, zip. Konsistensi yang dicapai web terutama ketika itu tergantung pada permintaan API adalah peningkatan yang brutal.

Saya sangat merekomendasikan dokumentasi ini , karena ini adalah dokumentasi resmi reactiveX dan saya merasa paling jelas di luar sana.

Jika Anda ingin masuk ke observable, saya akan menyarankan posting 3-bagian ini: http://blog.danlew.net/2014/09/15/grokking-rxjava-part-1/

Meskipun dimaksudkan untuk RxJava, konsepnya sama, dan itu dijelaskan dengan sangat baik. Dalam dokumentasi reactiveX, Anda memiliki persamaan untuk setiap fungsi. Anda harus mencari RxJS.

Janji:

• Berikan nilai masa depan tunggal;
• Tidak malas;
• Tidak dapat dibatalkan;

Tampak:

• Memancarkan banyak nilai dari waktu ke waktu;
• Malas;
• Dibatalkan;
• Mendukung peta, filter, pengurangan dan operator serupa

Anda dapat menggunakan janji alih-alih yang terlihat saat memanggil HTTP di Angular jika diinginkan.

Gambaran:

• Baik Janji dan Observable membantu kita berurusan dengan operasi asinkron. Mereka dapat memanggil panggilan balik tertentu ketika operasi asinkron ini dilakukan.
• Janji hanya dapat menangani satu acara, Observable adalah untuk aliran acara dari waktu ke waktu
• Janji tidak dapat dibatalkan setelah menunggu
• Data yang dapat diobservasi dapat ditransformasikan menggunakan operator

Anda selalu dapat menggunakan observable untuk berurusan dengan perilaku asinkron karena observable memiliki semua fungsionalitas yang ditawarkan janji (+ ekstra). Namun, terkadang fungsi tambahan yang ditawarkan Observables ini tidak diperlukan. Maka itu akan menjadi biaya tambahan untuk mengimpor perpustakaan untuk menggunakannya.

Kapan menggunakan Janji:

Gunakan janji ketika Anda memiliki operasi async tunggal yang ingin Anda proses hasilnya. Sebagai contoh:

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

Jadi sebuah janji mengeksekusi beberapa kode di mana ia bisa menyelesaikan atau menolak. Jika salah satu penyelesaian atau penolakan disebut, janji beralih dari status tertunda ke status diselesaikan atau ditolak . Ketika kondisi janji terselesaikan, then()metode ini dipanggil. Ketika negara janji ditolak, catch()metodenya disebut.

Kapan menggunakan Observables:

Gunakan Observable ketika ada aliran (data) dari waktu ke waktu yang perlu Anda tangani. Aliran adalah urutan elemen data yang dibuat tersedia seiring waktu . Contoh aliran adalah:

1. Peristiwa pengguna, mis. Klik, atau peristiwa pencatatan. Pengguna menghasilkan acara (data) dari waktu ke waktu.
2. Websockets, setelah klien membuat koneksi WebSocket ke server itu mendorong data dari waktu ke waktu.

Dalam Observable sendiri ditentukan ketika peristiwa berikutnya terjadi, ketika kesalahan terjadi , atau ketika Observable selesai . Kemudian kita bisa berlangganan ke observable ini, yang mengaktifkannya dan dalam berlangganan ini, kita bisa meneruskan dalam 3 panggilan balik (tidak harus selalu lulus semua). Satu panggilan balik akan dieksekusi untuk keberhasilan, satu panggilan balik untuk kesalahan, dan satu panggilan balik untuk penyelesaian. Sebagai contoh:

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

Saat membuat observable itu membutuhkan fungsi callback yang memasok pengamat sebagai argumen. Pada pengamat ini, Anda kemudian dapat memanggil onNext, onCompleted, onError. Kemudian ketika Observable berlangganan, itu akan memanggil panggilan balik yang sesuai dilewatkan ke berlangganan.

Janji - Memberikan nilai masa depan tunggal. Tidak malas . Tidak bisa dibatalkan. Itu akan menolak atau menyelesaikan.

Diamati - Memberikan beberapa nilai masa depan. Malas. Dapat dibatalkan Ini memberikan metode lain peta langsung, filter, kurangi.

Kesamaan janji vs Teramati terlebih dahulu

1. Keduanya digunakan untuk menangani kode async.
2. Silakan mencari contoh janji. Promise constructor melewati fungsi referensi penyelesaian yang akan dipanggil ketika dipanggil dengan beberapa nilai setelah menyelesaikan beberapa tugas async.

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

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

3. Contoh yang bisa diamati sekarang. Di sini juga kita menyampaikan fungsi ke observable, pengamat untuk menangani tugas async. Tidak seperti tekad dalam janji itu memiliki metode berikut dan berlangganan pada saat itu.

4. Jadi keduanya menangani tugas async. Sekarang mari kita lihat perbedaannya.

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

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

Perbedaan dijanjikan vs Teramati

Janji

1. Ini menyelesaikan atau menolak nilai tunggal dan dapat menangani tugas async nilai tunggal pada suatu waktu.
2. Sebuah janji setelah menyelesaikan nilai async yang dituntaskannya, tidak dapat lagi digunakan. Itu hanya digunakan satu kali dan di sini gagal.
3. Tidak bisa dibatalkan
4. Tidak ada dukungan rxjs untuk operator.

Tampak

1. kemampuan untuk memancarkan beberapa nilai asinkron.
2. Digunakan untuk menangani aliran peristiwa atau nilai. Pertimbangkan Anda memiliki berbagai tugas atau nilai, dan Anda ingin setiap kali nilai dimasukkan ke dalamnya, ia harus ditangani secara otomatis. Setiap kali Anda memasukkan nilai ke dalam array ini, semua pelanggannya akan menerima nilai terbaru secara otomatis.
3. Dapat diamati berguna untuk mengamati perubahan input, interval berulang, nilai siaran ke semua komponen anak, pemberitahuan push soket web dll.
4. Dapat dibatalkan menggunakan metode berhenti berlangganan kapan saja.
5. Satu lagi bagian terakhir yang menjanjikan adalah dukungan untuk operator rxjs. Anda memiliki banyak operator pipa yang memetakan, memfilter, switchMap, menggabungkanLatest dll. Untuk mengubah data yang dapat diamati sebelum berlangganan.

Baik Janji dan Observable membantu kita berurusan dengan operasi asinkron. Mereka dapat memanggil panggilan balik tertentu ketika operasi asinkron ini dilakukan.

Angular menggunakan Observables yang berasal dari RxJS alih-alih janji untuk berurusan dengan HTTP

Below are some important differences in promises & Observables.

Suatu Janji memancarkan satu peristiwa tunggal ketika aktivitas async selesai atau gagal.

Suatu Observable seperti Stream (dalam banyak bahasa) dan memungkinkan untuk melewatkan setidaknya nol atau lebih peristiwa di mana panggilan balik diperlukan untuk setiap peristiwa.

Sering Diamati lebih disukai daripada Janji karena memberikan highlights dari Janji dan banyak lagi. Dengan Observable, tidak masalah jika Anda perlu menangani 0, 1, atau berbagai acara. Anda dapat menggunakan API serupa untuk setiap kasus.

Janji: janji memancarkan nilai tunggal

Sebagai contoh:

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

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

Diamati: Memancarkan banyak nilai selama periode waktu tertentu

Sebagai contoh:

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

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

kita dapat memikirkan suatu yang dapat diamati seperti suatu aliran yang memancarkan banyak nilai selama periode waktu tertentu dan fungsi panggilan balik yang sama dipanggil untuk setiap item yang dipancarkan sehingga dengan suatu pengamatan kita dapat menggunakan API yang sama untuk menangani data asinkron. apakah data tersebut ditransmisikan sebagai nilai tunggal atau beberapa nilai dalam rentang waktu tertentu.

Janji:

• Sebuah janji bukanlah Malas
• Janji tidak dapat dibatalkan

Tampak:

• Yang bisa diamati adalah Malas. "Dapat diamati" lambat. Itu tidak dipanggil sampai kita berlangganan.
• Observable dapat dibatalkan dengan menggunakan metode unsubscribe ()
• Tambahan yang bisa diamati memberikan banyak operator yang kuat seperti peta, foreach, filter, kurangi, coba lagi, coba lagi ketika dll.

Janji Sudut vs Yang Dapat Diamati

Promise memancarkan nilai tunggal sementara Observable memancarkan beberapa nilai. Jadi, saat menangani permintaan HTTP, Promise dapat mengelola satu respons untuk permintaan yang sama, tetapi bagaimana jika ada beberapa respons terhadap permintaan yang sama, maka kita harus menggunakan Observable. Ya, Dapat Diamati dapat menangani beberapa respons untuk permintaan yang sama.

Janji

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

Keluaran

Promise 1

Tampak

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

Keluaran

Observable 1
Observable 2
Observable 3

Di bawah ini adalah beberapa perbedaan penting dalam janji & yang bisa diamati.

Janji

• Hanya memancarkan nilai tunggal
• Tidak bisa dibatalkan
• Tidak bisa dibagi
• Selalu tidak sinkron

Tampak

• Memancarkan banyak nilai
• Menjalankan hanya ketika dipanggil atau seseorang berlangganan
• Dapat dibatalkan
• Dapat dibagikan dan berlangganan nilai yang dibagikan oleh banyak pelanggan. Dan semua pelanggan akan mengeksekusi pada satu titik waktu.
• mungkin tidak sinkron

Untuk pemahaman yang lebih baik, lihat https://stackblitz.com/edit/observable-vs-promises

Saya melihat banyak orang menggunakan argumen bahwa Observable "dapat dibatalkan" tetapi agak sepele untuk membuat Janji "dapat dibatalkan"

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

Jawaban singkat :

Diamati adalah lebih baik , ia memiliki semua Janji fitur ditambah fitur tambahan.

Jawaban panjang:

Janji:

• Sekali Pakai "Kembalikan data satu kali"
• Tidak batal
• Satu pendengar
• Tidak Ada Soket Mendukung Satu Pendengar

Tampak:

• Kembalikan Data berkali-kali saat data berubah
• Dukungan dibatalkan
• Soket pendukung
• Mendukung banyak Pendengar dan memberi tahu mereka ketika data berubah
• Mendukung peta, memfilter, mengurangi

Meskipun jawaban yang diterima baik secara umum, saya tidak berpikir itu menekankan bahwa ketika berhadapan dengan Komponen Angular Anda hampir selalu ingin menggunakan Observable karena mendukung pembatalan. Janji tidak dapat dibatalkan dan akan menyelesaikan bahkan jika komponen Anda hancur. Angular cenderung memaafkan sampai tidak.

Misalnya setiap deteksi perubahan manual pada komponen yang hancur akan menyebabkan pengecualian:

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

Jika komponen Anda dihancurkan sebelum janji itu diselesaikan, Anda akan mendapatkan attempt to use destroyed viewkesalahan ketika janji itu diselesaikan.

Atau, jika Anda menggunakan observable dengan pola takeUntil , maka segera setelah komponen Anda hancur berlangganan akan dibatalkan.

Ini sedikit contoh yang dibuat-buat tetapi mengeksekusi kode untuk komponen yang dihancurkan mungkin akan mengarah ke bug. Kecuali Anda benar-benar ingin melakukan itu karena beberapa alasan: p

Sesuatu yang saya temui yang tidak terlihat dari pembacaan pertama tutorial dan dokumen adalah ide multicasting.

Pastikan Anda mengetahui bahwa secara default, beberapa langganan akan memicu beberapa eksekusi di Observable. Berlangganan ganda ke satu panggilan HTTP yang dapat diobservasi akan memicu beberapa panggilan HTTP yang identik kecuali jika Anda .share()(aktifkan multicasting).

Sebuah janji memaksa Anda untuk berurusan dengan satu hal pada satu waktu, membuka datanya, menangani pengecualian, memiliki dukungan bahasa untuk hal-hal keren seperti async / menunggu, dan sebaliknya sangat barebones.

Sebuah Observable memiliki banyak lonceng dan peluit, tetapi Anda perlu memahami kekuatan yang Anda kerjakan atau dapat disalahgunakan.

Janji:

Async Event Handler - Objek Promise mewakili penyelesaian akhir (atau kegagalan) operasi asinkron, dan nilai yang dihasilkannya.

Sintaks: Janji baru (pelaksana);

Misalnya:

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

Tentang Promise: Ini memiliki satu pipeline jadi, itu akan mengembalikan nilai hanya sekali ketika dipanggil. penangannya satu arah yang disebut begitu Anda mungkin tidak dapat membatalkan. sintaks yang berguna Anda dapat bermain-main, kapan () dan kemudian ()

Dapat diobservasi:

Dapat diamati adalah koleksi malas dari berbagai nilai dari waktu ke waktu. itu benar-benar pendekatan yang bagus untuk operasi async. itu dapat dilakukan dengan rxjs yang memiliki dukungan lintas platform dapat digunakan dengan sudut / bereaksi dll.

aktingnya seperti stream liner. bisa multi pipeline. jadi setelah ditentukan Anda dapat berlangganan untuk mendapatkan hasil pengembalian di banyak tempat.

Sintaks: import * as Rx from "@reactivex/rxjs"; ke init:

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

dll

untuk berlangganan: RxLogger.getInstance();

Misalnya:

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

karena mendukung multi pipeline, Anda dapat berlangganan hasil di lokasi yang berbeda, ia memiliki banyak kemungkinan daripada janji.

Penggunaan: memiliki lebih banyak kemungkinan sepertimap, filter, pipe, map, concatMap etc

Perbedaan mendasar antara yang dapat diamati dan yang dijanjikan adalah:

Dapat diamati sering dibandingkan dengan janji. Berikut adalah beberapa perbedaan utama:

Dapat diobservasi bersifat deklaratif; perhitungan tidak dimulai sampai berlangganan. Janji dieksekusi segera pada penciptaan. Ini membuat observable berguna untuk menentukan resep yang dapat dijalankan kapan pun Anda membutuhkan hasilnya.

Dapat diamati memberikan banyak nilai. Janji memberikan satu. Ini membuat observable berguna untuk mendapatkan banyak nilai dari waktu ke waktu.

Dapat diobservasi membedakan antara rantai dan berlangganan. Janji hanya memiliki .then () klausa. Hal ini membuat dapat diamati berguna untuk membuat resep transformasi kompleks untuk digunakan oleh bagian lain dari sistem, tanpa menyebabkan pekerjaan yang harus dilakukan.

Berlangganan yang dapat diobservasi () bertanggung jawab untuk menangani kesalahan. Janji mendorong kesalahan ke janji anak. Ini membuat observable berguna untuk penanganan kesalahan yang terpusat dan dapat diprediksi.

Itulah perbedaan paling sederhana yang dapat Anda temukan di dokumen ANGULAR.IO. Jawaban sisanya diberikan oleh sebagian besar benar di tempatnya sendiri

1. Janji terfokus hanya untuk nilai-nilai tunggal atau penyelesaian, yang dapat diamati adalah aliran data.

2. Dapat diamati dapat dibatalkan tetapi janji tidak dapat dibatalkan.

Yang paling tidak dikenal, setidaknya bagi saya adalah

3. Janji selalu bersifat asinkron, tetapi dapat diobservasi bisa sinkron dan asinkron.

1. a Promise sangat ingin, sedangkan Observable malas,
2. suatu Janji selalu asinkron, sedangkan yang Dapat Diamati dapat berupa sinkron atau asinkron,
3. suatu Janji dapat memberikan nilai tunggal, sedangkan Yang Dapat Diobservasi adalah a
   aliran nilai (dari 0 hingga beberapa nilai),
4. Anda dapat menerapkan operator RxJS ke Observable untuk mendapatkan aliran khusus yang baru.

Observable and Promises membantu kita untuk bekerja dengan fungsi asinkron dalam JavaScript / naskah. Mereka sangat mirip dalam banyak kasus, namun, masih ada beberapa perbedaan di antara mereka.

Ada banyak jawaban untuk topik ini jadi saya tidak akan menambahkan yang berlebihan.

Tetapi untuk seseorang yang baru mulai belajar Observable / Angular dan bertanya-tanya mana yang harus digunakan dibandingkan dengan Promise , saya akan merekomendasikan Anda menjaga semuanya Teramati dan mengkonversi semua Janji yang ada dalam proyek Anda ke Observable.

Hanya karena kerangka kerja Angular itu sendiri dan komunitasnya semuanya menggunakan Observable. Jadi itu akan bermanfaat ketika Anda mengintegrasikan layanan kerangka kerja atau modul pihak ke-3 dan merantai semuanya bersama-sama.

Meskipun saya menghargai semua downvotes tetapi saya tetap bersikeras pendapat saya di atas kecuali seseorang memberikan komentar yang tepat untuk membuat daftar beberapa skenario yang mungkin masih berguna dalam proyek Angular Anda untuk menggunakan Promises over Observables.

Tentu saja, tidak ada pendapat yang 100% benar dalam semua kasus, tetapi setidaknya saya pikir 98% dari waktu untuk proyek komersial reguler diimplementasikan dalam kerangka kerja Angular, Observable adalah cara yang tepat untuk melangkah.

Bahkan jika Anda tidak menyukainya pada titik awal proyek hobi sederhana Anda, Anda akan segera menyadari hampir semua komponen yang berinteraksi dengan Anda di Angular, dan sebagian besar kerangka kerja pihak ketiga Angular yang ramah menggunakan Observables, dan kemudian Anda akan akhirnya secara konstan mengonversi Janji Anda untuk Diobservasi untuk berkomunikasi dengan mereka.

Komponen-komponen itu termasuk tetapi tidak terbatas pada: HttpClient, Form builder, modul / dialog material sudut, Ngrx store / effects dan ngx-bootstrap.

Faktanya, satu-satunya Janji dari Sistem Ekuler Angular yang saya tangani dalam 2 tahun terakhir adalah APP_INITIALIZER.