Am fost foarte încântat de Promises încă de când au fost introduse acum un an. Deși există o mulțime de postări și opinii care circulă, Promises nu vă vor face codul mai performant… îl vor face mai ușor de citit și de înțeles (ceea ce, în cartea mea, contează adesea mult mai mult!)
Pentru prima parte a acestui post, voi explica structura de bază a promisiunilor. Dacă v-ați ocupat de asta, nu ezitați să derulați până la a doua jumătate a postării.
Promisiunile explicate pe înțelesul tuturor
Iată structura de bază a unei Promise în Javascript:
Un fragment de cod destul de tipic (și evaziv) acolo. Voi încerca să despart ce se întâmplă.
Pentru început, concentrați-vă doar pe liniile 1-15:
- Aici este instanțierea. Această linie creează practic o promisiune. O promisiune în JS are nevoie de ceva de făcut, o sarcină. Deci funcția pe care o vedeți fiind trecută aici – function (resolve,reject) {…} este acea sarcină
- În continuare vedeți corpul sarcinii. Puteți face lucruri aici. Undeva în acest bloc de cod, trebuie să decideți dacă lucrurile au mers bine sau nu. De exemplu, dacă ați folosit acest spațiu pentru a prelua o imagine, fie ați primit-o (a mers bine)… fie nu (nu atât de bine).
- Dacă lucrurile au mers bine, veți apela o funcție care va marca această promisiune ca fiind „rezolvată”. Dacă lucrurile nu au mers conform planului, veți „respinge” această promisiune. (vom vorbi despre acest lucru mai în detaliu în doar o secundă)
- Până acum, în liniile 1-15, ați definit doar obiectul Promise
- La liniile 17 & 22, practic îi atașați un handler
- promisiunii.XXXX (unde XXX ar putea fi „.then” sau „.catch” etc.) rulează practic funcția definită în promisiune (liniile 1-15). În funcție de cum au decurs lucrurile (rezolvate sau respinse), acestea vor apela funcțiile din „.then” și, respectiv, „.catch”. Deci, dacă promisiunea a fost rezolvată (…lucrurile au mers bine), funcția din .then(…) va fi executată, altfel se execută funcția din .catch(…).
- „.then(function)” returnează o Promise. De asemenea, puteți apela „.then(…)” sau „.catch(…)” numai pe obiecte Promise.
- google.com
- apple.com
- amazon.com
- Liniile 1-11: Creați un înveliș simplu în jurul metodei AJAX Get oferită de jQuery. Aceasta va trece pur și simplu răspunsul la callback-ul specificat.
- Liniile 18-51: Apoi creez trei funcții (da! Funcții!) care returnează o promisiune JS Promise
- Care promisiune face acest lucru în mod intern – folosește învelișul Ajax pentru a prelua url-ul său și, odată ce datele/răspunsul sunt primite, face ceva cu datele și, în final, apelează „resolve()”
- În linia 54: Am înlănțuit aceste promisiuni una după alta. Rețineți că fiecare dintre aceste funcții returnează o promisiune (și nu este o promisiune în sine). Acesta este motivul pentru care folosesc „first()”.then(…) spre deosebire de „first.then(…)”
Acum să ne concentrăm pe partea rămasă a fragmentului de cod, liniile 17-27:
NOTE:
Acum că am acoperit elementele de bază, să ne uităm la un exemplu mai interesant despre ceea ce putem face cu Promise.
Chaining Promises pentru a executa mai multe cereri
Problemă: Recent, m-am confruntat cu o situație în care în care trebuia să obțin o serie de URL-uri unul după altul. Cu toate acestea, răspunsul pentru fiecare URL trebuia să fie tratat diferit în funcție de URL.
De dragul acestei postări, să presupunem că URL-urile care sunt preluate sunt:
Iată o versiune simplificată a scriptului pe care l-am folosit pentru a gestiona acest lucru:
Să descompunem acest lucru:
Pentru a clarifica și mai mult, iată un mod de a privi lanțul de promisiuni.
În acest mod, puteți obține secvențial fiecare URL, îl puteți trata după cum doriți și puteți lansa funcția „resolved()” pentru a declanșa următoarea promisiune din lanț 🙂
Nota: dacă încercați să rulați fragmentul de cod de mai sus în browser, va trebui să activați CORS. Iată o extensie Chrome care vă poate ajuta să faceți acest lucru cu un simplu clic.
Sperăm că v-a plăcut această postare.
.