Unul dintre cele mai provocatoare lucruri pentru ca noii dezvoltatori să învețe este modelul observator. Înțelegerea modului de utilizare eficientă cu RxJS pentru a face față datelor asincrone, cum ar fi evenimentele utilizatorului, solicitările HTTP sau orice alte evenimente care necesită așteptarea finalizării a ceva, este dificilă.

Ceea ce luptă majoritatea oamenilor este noua abordare. Este nevoie de o mentalitate diferită, unde vizualizarea joacă un rol important. Ne gândim la date ca la o secvență de valori care trece în timp, mai degrabă decât ca o singură valoare care este recuperată o dată. Această mentalitate este cunoscută sub numele de programare reactivă.

Deoarece modelul Observator este un ecosistem destul de mare format din multe părți importante, am ales să-l restrâng concentrându-mă doar pe Observabile. Voi împărtăși în curând alte articole care acoperă restul modelului Observer, cum ar fi modul de a face față RxJS.

Subiecte pe care le vom aborda:

  1. Ce înseamnă într-adevăr asincron?
  2. Ce tipar să utilizați (observator sau promisiune)
  3. Cum se creează un Observable (exemplele de cod încep aici)
  4. Cum să vă abonați la un Observable
  5. Cum să vă dezabonați de la un Observable

1. Ce înseamnă într-adevăr asincron?

Unul dintre lucrurile de pe web și majoritatea limbilor este că, odată ce solicitați date, cum ar fi solicitarea unei liste de utilizatori de pe server, nu puteți garanta că datele vor fi returnate. Există o problemă de incertitudine.

Unul dintre motive poate fi faptul că datele nu sunt prezente, serverul poate fi întrerupt sau URL-ul HTTP nu este valid deoarece cineva a schimbat șirul de interogare.

Din acest motiv, împreună cu alte câteva, trebuie să ne ocupăm de astfel de date în mod asincron. Solicităm lista de utilizatori și așteptăm până când este recuperată, dar nu opriți întreaga aplicație pentru o operație simplă.

Este ca și cum ai spune unui coleg să rezolve o sarcină în loc să trimită întreaga echipă; aceasta ar fi o abordare costisitoare și nu o înțelepciune.

Să clarificăm o concepție greșită: termenii sincron sau asincron nu au nicio legătură cu multi-threading, unde operațiile sunt executate în același timp. Înseamnă pur și simplu că operațiunile sunt fie dependent de sau independent de unii pe alții, atât.

Să comparăm diferența dintre sincron și asincron pentru a înțelege mai bine cum funcționează cu adevărat.

Ce este Synchronous?

Cu Evenimente sincrone, așteptați ca unul să se termine înainte de a trece la o altă sarcină.

Exemplu: Sunteți într-o coadă pentru a obține un bilet la film. Nu poți obține unul până când toată lumea din fața ta nu primește unul, și același lucru se aplică și persoanelor aflate la coadă în spatele tău. Răspuns de themightysapien.

Ce este Asincron?

Cu evenimentele asincrone, nu așteptați, puteți trece la următoarea sarcină până când datele sunt disponibile.

Exemplu: Sunteți într-un restaurant cu mulți alți oameni. Îți comanzi mâncarea. De asemenea, alte persoane își pot comanda mâncarea, nu trebuie să aștepte ca mâncarea dvs. să fie gătită și servită înainte de a putea comanda. În bucătărie, muncitorii din restaurante gătesc, servesc și primesc în permanență comenzi. Oamenii își vor servi mâncarea imediat ce este gătită. Răspuns de themightysapien.

Bine, deci, pe scurt, acest lucru ne permite fie să așteptăm ca operațiunile să se întâmple înainte de a putea merge mai departe, fie să nu așteptăm până când datele sunt gata.

2. Ce tipar să utilizați (observator sau promisiune)

În primul rând, atât modelul observator, cât și modelul promisiunii se ocupă de operații asincrone. Operațiuni precum evenimente de utilizator sau solicitări HTTP sau orice alte evenimente care se execută independent.

Majoritatea operațiunilor de astăzi au nevoie de un anumit tip de manipulare asincronă / sincronă, iar înțelegerea modului în care funcționează joacă un rol important atunci când construiește aplicații robuste.

Nu este menit să-ți facă viața mai grea, ci mai ușoară. Cu toate acestea, necesită astfel o curbă de învățare care poate fi o abordare dureroasă, dar recompensa de la final merită.

Rămâneți cu un singur model

Diferența constă în complexitatea aplicației. Dacă aveți de-a face cu o aplicație mică în care sarcina este să obțineți pur și simplu o listă de utilizatori de pe server sau să afișați membrii activi, atunci promiteți cu Fetch API (Citeste mai mult) funcționează bine.

Dar dacă aveți de-a face cu o aplicație mare cu multe operații asincrone care necesită schimbarea datelor, efectuarea mai multor operațiuni pe un flux de date sau refolosirea acestuia în mai multe locuri, atunci modelul de observator funcționează excelent.

Pot folosi ambele tipare într-un singur proiect?

Da, dar nu este recomandat să amestecați între două arhitecturi care practic fac același lucru (gestionați evenimente asincrone). În schimb, rămâneți cu unul și aflați mai multe despre acesta.

Îmbunătățiți-vă abilitățile cu RxJS

Cu RxJS, aveți acces la 189 de operatori cu documentație + alte resurse grozave. Și fiecare dintre acești operatori sunt pur și simplu apeluri de apel care fac ceva pe fluxul de date.

Dacă sunteți familiarizat cu prototipurile funcționale JavaScript (metode), cum ar fi map(), filter(), și reduce(), le veți găsi în RxJS. Rețineți, conceptul este același, dar codul scris nu.

Deci, care este diferența dintre aceste două modele?

O introducere a observabilelor in programarea reactiva
Observabil vs Promisiune

Iată o comparație rapidă între modelul observator și modelul promisiunii. Punctele cheie sunt că o promisiune emite o singură valoare (valori) odată ce .then() apelul de apel este utilizat, în timp ce un Observable emite valori multiple ca o secvență de date care trece în timp. Un alt punct important este că un Observabil poate fi anulat sau reîncercat în timp ce o promisiune nu poate. Cu toate acestea, există pachete externe care fac posibilă anularea unei promisiuni.

3. Cum creăm un Observable?

Iată câteva moduri în care se poate crea un Observabil:

  • creați un Observable de la zero
  • transformă o promisiune într-un Observabil
  • sau utilizați un cadru care o face pentru dvs. în culise, cum ar fi Angular.

Știați că Angular folosește extensiv modelul Observer? Toate operațiunile asincrone, cum ar fi HTTP GET sau ascultarea evenimentelor sau a modificărilor valorii, urmează modelul observatorului.

Dacă vreți vreodată să imitați (să testați) un scenariu din lumea reală, ca să spunem să treceți valorile în timp, vă recomand cu tărie să folosiți funcția de interval. Aceasta transmite valori după x timp în milisecunde. Deci, dacă aveți un interval în care x este 2000ms – acesta trece fiecare valoare (trepte) după 2 secunde.

4. Cum ne abonăm la un Observable?

Un Observabil este pur și simplu o colecție de date care așteaptă să fie invocate (abonate) înainte de a putea emite date. Dacă ați lucrat cu promisiuni, atunci modalitatea de a accesa datele este să le conectați cu then() operator sau utilizați ES6 async/await.

Deci, pentru a urma exemplul anterior, cum se accesează datele?

După cum se arată mai sus, când ne abonăm, îi spunem Observabilului să ne transmită orice are. Poate fi o matrice, o colecție de evenimente sau o secvență de obiecte și așa mai departe.

O greșeală obișnuită pentru începători pe care am văzut-o în rândul dezvoltatorilor este că aceștia fac multe operații pe Observable, dar se frustrează, deoarece nu pot vedea rezultate. Nu ești singur! Am făcut această greșeală de câteva ori și, de regulă, nu uitați să vă abonați.

5. Cum ne dezabonăm de la un Observabil?

Este important să vă dezabonați, altfel ajungem la o scurgere de memorie care încetinește browserul. Dacă ați lucrat cu Angular, există o conductă numită asyncPipe care se abonează și se dezabonează automat pentru dvs.

Modul în care ne dezabonăm este că creăm o referință la fiecare observabil care este subscris prin crearea unei variabile pentru a-și păstra starea actuală. Și apoi, pentru fiecare variabilă, o înlănțuim cu unsubscribe() metodă. Amintiți-vă că vă puteți dezabona numai după ce v-ați abonat. Este destul de simplu, dar de multe ori uitat.

Observați, dacă vă dezabonați aici, Observable_1 și Observable_2 va afișa datele înainte de a fi dezabonate, deoarece acestea sunt observabile reci (nu dependente de timp), în timp ce Observable_3 și Observable_4 nu va afișa nimic, deoarece acestea sunt observabile fierbinți (dependente de timp).

rezumat

După cum sa menționat mai sus, cea mai provocatoare parte a învățării modelului de observator este mentalitatea. O mentalitate în care privim valorile în mod diferit, cum ar fi o secvență de date care emite în timp. În acest articol, am abordat tipuri de moduri în care putem crea un Observable, precum și modalități de abonare și dezabonare.

Vă recomand să utilizați modelul de observator, deoarece oferă tot ceea ce oferă modelul de promisiune și multe altele. De asemenea, oferă câțiva operatori extraordinari pentru a împiedica utilizatorii să trimită mii de cereri inutile către backend.

Unul dintre ei este debonceTime ceea ce oferă utilizatorului suficient timp pentru a scrie un cuvânt complet și apoi pentru a trimite o cerere în loc de o cerere pentru fiecare caracter. Desigur, puteți realiza acest lucru printr-o promisiune simplă, dar asta necesită câteva linii de cod.

Voi acoperi mai multe despre programarea reactivă în viitorul apropiat, rămâneți la curent!

Dacă sunteți interesat să aflați mai multe despre ecosistemul web, iată câteva articole pe care le-am scris pentru a vă îmbunătăți abilitățile de web, bucurați-vă 🙂

Dacă doriți să deveniți un dezvoltator web mai bun, să vă începeți propria afacere, să îi învățați pe alții sau să vă îmbunătățiți abilitățile de dezvoltare, mă puteți găsi pe Medium, unde public săptămânal. Sau poți să mă urmărești mai departe Stare de nervozitate, unde postez sfaturi și trucuri relevante pentru dezvoltarea web.

PS Dacă ți-a plăcut acest articol și vrei mai multe ca acestea, te rog să dai palme ❤ și să le împărtășești prietenilor care ar putea avea nevoie de el, este o karma bună.