Observabile‘,’Observabile‘,’Observabile‘…Da! Astăzi, vom vorbi despre acest cuvânt adesea discutat al pieței. Vom afla, de asemenea, în ce fel sunt diferite de Promisiuni (nu ați auzit de Promisiuni? Nu vă faceți griji! Veți afla mai multe în curând). Să începem!

Am întâlnit prima dată termenul Observabil când am început să învăț Angular. Deși nu este o caracteristică specifică unghiului, este un nou mod de manipulare asincron solicitări. Solicitare asincronizată? Știi asta, nu? Nu! E bine. Să înțelegem mai întâi ce este asincron cererea este atunci.

Cereri de sincronizare

Bine! Trebuie să fi citit despre caracteristicile asincrone din lumea JavaScript. ‘Asincronie„în lumea computerelor înseamnă că fluxul programului are loc independent. Nu așteaptă finalizarea unei sarcini. Se trece la următoarea sarcină.

Acum, s-ar putea să vă gândiți – ce se întâmplă cu sarcina care nu este terminată? Colegul de muncă se ocupă de acele sarcini neterminate. Da! În fundal, un coleg lucrează și gestionează acele sarcini neterminate și, odată ce acestea sunt terminate, trimite datele înapoi.

Acest lucru poate aduce o altă întrebare cu privire la modul în care gestionăm datele returnate. Raspunsul este Promisiuni, Observabile, apeluri de apel si multe altele.

Știm că aceste operațiuni asincrone returnează răspunsuri, fie unele date după succes, fie o eroare. Pentru a rezolva acest lucru, concepte precum Promisiuni, apeluri de apel, observabile a venit pe piață. Bine! Nu voi intra în ele acum, deoarece ne-am abătut de la subiectul nostru, adică „asincron‘ cerere. (Nu vă faceți griji! Aceste subiecte vor fi discutate în curând).

După ce ați discutat despre punctele de mai sus, este posibil să aveți o imagine aproximativă a ceea ce asincron cererea este. Să ne lămurim. Un Asincron cererea este una în care clientul nu așteaptă răspunsul. Nimic nu este blocat. Să înțelegem acest concept analizând un scenariu foarte comun.

În lumea web, este destul de obișnuit să accesați serverul pentru a obține date precum detaliile unui utilizator, o listă și așa mai departe. Știm că va dura timp și orice va putea urma (succes / eșec).

în acest caz, în loc să așteptăm să vină datele, le tratăm asincron (fără așteptare), astfel încât aplicația noastră să nu fie blocată. Astfel de cereri sunt cereri asincrone. Cred că acum suntem clari cu asta. Deci, să vedem cum putem gestiona aceste cereri de sincronizare.

După cum v-am spus deja, Observables ne-a oferit un nou mod de gestionare a cererilor de asincronizare. Celelalte modalități sunt promisiuni, apeluri de apel și asincronizare / așteptare. Acestea sunt căile populare. Să aruncăm o privire la două dintre ele, care sunt callbacks și promisiuni.

Rambursări

Rambursările sunt destul de frecvente. Funcțiile de apel invers (așa cum sugerează și numele lor) sunt apelate în spate. Atunci când cererea este finalizată și returnează datele sau eroarea, aceste funcții sunt apelate. Aruncați o privire asupra codului pentru o mai bună înțelegere:

const request = require(‘request’);
request('https://www.example.com', function (err, response, body) {
  if(error){
    // Error handling
  }
  else {
    // Success 
  }
});

Acesta este un mod de a gestiona o cerere asincronizată. Dar ce se întâmplă atunci când dorim să solicităm din nou serverului date după succesul primei solicitări? Ce se întâmplă dacă dorim să facem o a treia cerere după acea a doua cerere reușită? Oribil!

În acest moment, codul nostru va deveni dezordonat și mai puțin lizibil. Aceasta se numește „suna inapoi iad‘. Pentru a o depăși, au apărut promisiuni. Acestea oferă o modalitate mai bună de gestionare a unei cereri asincronizate care îmbunătățește lizibilitatea codului. Să înțelegem un pic mai mult.

Promisiuni

Promisiunile sunt obiecte care promit că vor avea valoare în viitorul apropiat – fie un succes, fie un eșec. Promisiunile au propriile lor metode care sunt atunci și captură. .atunci() se numește când vine succesul, altfel captură() apeluri de metodă. Promisiuni sunt create folosind promisiune constructor. Aruncați o privire asupra codului pentru a înțelege mai bine.

function myAsyncFunction(name){
     return new Promise(function(resolve, reject){
          if(name == ‘Anchal’){
               resolve(‘Here is Anchal’)
         }
         else{
              reject(‘Oops! This is not Anchal’)
        }

     }
} 

myAsyncFunction(‘Anchal’)
.then(function(val){
      // Logic after success
      console.log(val)     // output -  ‘Here is Anchal’
})
.catch(function(val){
    //Logic after failure
     console.log(val)     // output - ‘Oops! This is not Anchal’
})

După cum puteți vedea, myAsyncFunction este de fapt promițătoare că va avea o anumită valoare în viitorul apropiat. .atunci() sau .captură() este chemat în funcție de statutul promisiunii.

Promisiuni îmbunătăţi cod lizibilitate. Puteți vedea cât de lizibil este codul folosind promisiuni. O mai bună gestionare a operațiilor asincronizate poate fi realizată folosind Promises. Aceasta este o scurtă introducere a ceea ce sunt promisiunile, modul în care gestionează datele și ceea ce au promisiunile de frumusețe.

Acum, este timpul să aflăm despre subiectul nostru principal: Observabile.

Ce sunt observabilele?

Observabilele sunt, de asemenea, ca apeluri de apel și promisiuni – care sunt responsabile pentru gestionarea cererilor asincronizate. Observabilele fac parte din RXJS bibliotecă. Această bibliotecă a introdus Observables.

Înainte de a înțelege ce este de fapt un observabil, trebuie să înțelegeți două modele de comunicare: Trage și Apăsați. Aceste două concepte sunt protocoale ale modului în care producătorii de date comunică cu consumatorii de date.

Modelul Pull & Push

După cum v-am spus deja, Push și Pull sunt protocoale de comunicare între producătorii de date și consumatori. Să le înțelegem pe amândouă pe rând.

Trageți modelul: În acest model, consumator de date este rege. Aceasta înseamnă că consumatorul de date determină când dorește date de la producător. Producătorul nu decide când vor fi livrate datele. Puteți înțelege mai bine dacă vă raportați funcții la ea.

După cum știm, funcțiile sunt responsabile pentru îndeplinirea unor sarcini. De exemplu, dataProducer este o funcție care returnează pur și simplu un șir, cum ar fi „Salut Observabil“.

function dataProducer(){
   return ‘Hi Observable’;
}

Acum, puteți vedea că funcția de mai sus nu va decide când va livra șirul „Hi Observable”. Acesta va decide de către consumator, adică codul care numește această funcție. Consumatorul este rege. Motivul pentru care este numit un model de tragere este că Trage sarcina este determinarea comunicării. Aceasta este Trage Model. Acum, hai să intrăm în Apăsați Model.

Push Model: În acest model, producător de date este rege. Producătorul determină când să trimită date către consumator. Consumatorul nu știe când vor veni datele. Să o înțelegem luând un exemplu:

Sper să vă amintiți promisiuni. Da, Promisiuni urmează Apăsați model. O promisiune (producător) furnizează date către apelul de apel (.atunci() – consumator). Callback-urile nu știu când vor veni datele. Aici, promisiune (producătorul) este rege. Este determinarea comunicării. De aceea se numește Apăsați Model întrucât este responsabil producătorul.

La fel ca promisiunile, Observables urmează și modelul push. Cum? Veți primi răspunsul odată ce voi detalia observabilele. Să revenim atunci la observabile.

Observabile ca funcții

Pentru a înțelege pur și simplu, vă puteți gândi la observabile ca la funcții. Să aruncăm o privire la exemplele de mai jos:

function dataProducer(){
    return ‘Hi Observable’
}

var result = dataProducer();
console.log(result) // output -  ‘Hi Observable’

Puteți obține același comportament folosind un observabil:

var observable = Rx.Observable.create((observer: any) =>{

   observer.next(‘Hi Observable’);

})

observable.subscribe((data)=>{
   console.log(data);    // output - ‘Hi Observable’
})

De sus, puteți vedea atât funcțiile, cât și observabilele prezintă același comportament. Acest lucru vă poate aduce o întrebare în minte – sunt observabile la fel ca funcțiile? Nu. Voi clarifica într-un minut de ce răspunsul este nu. Aruncați o privire la o versiune elaborată a exemplului de mai sus.

function dataProducer(){
    return ‘Hi Observable’;
    return ‘Am I understandable?’ // not a executable code.
}

var observable = Rx.Observable.create((observer: any) =>{

   observer.next(‘Hi Observable’);
   observer.next( ‘Am I understandable?’ );

})

observable.subscribe((data)=>{
   console.log(data);    
})

Output :
‘Hi Observable’
‘Am I understandable?’ 

Sper că acum puteți vedea ce diferență am vrut să abordez. De sus, puteți vedea, atât funcțiile, cât și observabilele sunt leneșe. Trebuie să apelăm (funcții) sau să ne abonăm (observabile) pentru a obține rezultatele.

Abonamentele la observabile sunt destul de similare cu apelarea unei funcții. Dar unde observabilele sunt diferite este în capacitatea lor de a reveni multiplu valori numit pâraie (un flux este o secvență de date în timp).

Observabile nu numai că pot returna o valoare sincron, dar deasemenea asincron.

var observable = Rx.Observable.create((observer: any) =>{
   observer.next(‘Hi Observable’);
    setTimeout(()=>{
        observer.next(‘Yes, somehow understandable!’)
    }, 1000)   

   observer.next( ‘Am I understandable?’ );
})

output :

‘Hi Observable’
‘Am I understandable?’ 
Yes, somehow understandable!’.

Pe scurt, puteți spune observabilele sunt pur și simplu o funcție capabilă să dea mai multe valori în timp, fie sincron, fie asincron.

Acum aveți o schiță despre observabile. Dar să le înțelegem mai mult, examinând diferite faze ale observabilelor.

Faze observabile

Am văzut deja din exemplul de mai sus cum observabilele creează și execută și intră în joc prin abonament. Prin urmare, există patru etape prin care trec observabilele. Sunt:

  1. Creare
  2. Abonament.
  3. Execuţie
  4. Distrugere.

Crearea unui observabil se face folosind un crea funcţie.

var observable = Rx.Observable.create((observer: any) =>{
})

Pentru a face un observabil muncă, noi trebuie sa Abonati-va aceasta. Acest lucru se poate face folosind metoda subscribe.

observable.subscribe((data)=>{
   console.log(data);    
})

Executarea observabilelor este ceea ce se află în interiorul blocului de creare. Permiteți-mi să ilustrez cu ajutorul unui exemplu:

var observable = Rx.Observable.create((observer: any) =>{

   observer.next(‘Hi Observable’);        
    setTimeout(()=>{
        observer.next(‘Yes, somehow understandable!’)
    }, 1000)   

   observer.next( ‘Am I understandable?’ );

})

Codul de mai sus din interiorul funcției create este o execuție observabilă. Trei tipuri de valori pe care un observabil îl poate livra abonatului sunt:

observer.next(‘hii’);//this can be multiple (more than one)

observer.error(‘error occurs’) // this call whenever any error occus.

Observer.complete(‘completion of delivery of all values’) // this tells the subscriptions to observable is completed. No delivery is going to take place after this statement.

Să aruncăm o privire mai jos pentru a înțelege toate cele trei valori:

var observable = Rx.Observable.create((observer: any) =>{
try {
   observer.next(‘Hi Observable’);                                       
    setTimeout(()=>{
        observer.next(‘Yes, somehow understandable!’)
    }, 1000)   

   observer.next( ‘Am I understandable?’ );
   
   observer.complete();
   
   observer.next(‘lAST DELIVERY?’ );  
   // above block is not going to execute as completion notification is      already sent.
   }
catch(err){
     observer.error(err);	
  }

})                      

Ultima fază care intră pe piață este distrugerea. După o eroare sau o notificare completă, observabilul este dezabonat automat. Dar există cazuri în care trebuie să facem manual dezabonează-te aceasta. Pentru a efectua manual această sarcină, trebuie doar să utilizați:

var subscription = observable.subscribe(x => console.log(x)); // Later: subscription.unsubscribe();

Este vorba despre diferitele faze prin care trece un observabil.

Cred că acum știm ce sunt observabilele? Dar ce zici de cealaltă întrebare care este – în ce fel observabilele sunt diferite de promisiuni? Să găsim răspunsul la el.

Promisiuni vs observabile

După cum știm, promisiunile sunt pentru gestionarea cererilor asincronizate, iar observabilele pot face același lucru. Dar unde se deosebesc?

Observabilele sunt leneșe, în timp ce promisiunile nu

Acest lucru este destul de auto-explicativ: observabilele sunt leneșe, adică trebuie să ne abonăm observabile pentru a obține rezultatele. În cazul promisiunilor, acestea se execută imediat.

Observabilele gestionează valori multiple, spre deosebire de promisiuni

Promisiunile pot oferi doar o singură valoare, în timp ce observabilele vă pot oferi valori multiple.

Observabilele sunt anulabile

Puteți anula observabilele dezabonându-l folosind dezabonează-te metoda în timp ce promisiunile nu au o astfel de caracteristică.

Observabilele oferă mulți operatori

Există mulți operatori precum Hartă, pentru fiecare, filtru Observabilele le oferă în timp ce promisiunile nu au niciun operator în găleată.

Acestea sunt caracteristici care fac observabilele diferite de promisiuni.

Acum, este timpul să se încheie. Sper să înțelegeți mai bine subiectul fierbinte al observabilelor!

Mulțumesc pentru lectură!