Vodič za obećavanje JavaScript-a: Riješite, odbacite i ulančajte u JS i ES6

Obećanja su jedan od načina na koji možemo rješavati asinkrone operacije u JavaScript-u. Mnogi se ljudi bore s razumijevanjem funkcioniranja Obećanja, pa ću ih u ovom postu pokušati objasniti najjednostavnije što mogu.

Obećanja su široka tema pa ne mogu ulaziti u sve detalje u ovom članku. Ali naći ćete općeniti uvod u ono što su Obećanja, objašnjenja pojmova poput razrješenja, odbijanja i lančanog lanca, te primjer koda za stvaranje i upotrebu Obećanja.

Preduvjet: Da biste bolje razumjeli ovaj članak, pogledajte moj drugi post o JavaScript povratnim pozivima.

Što je obećanje?

Obećanje u JavaScript-u slično je obećanju u stvarnom životu. Kad obećamo u stvarnom životu, to je jamstvo da ćemo nešto poduzeti u budućnosti. Jer obećanja se mogu dati samo za budućnost.

Obećanje ima dva moguća ishoda: ili će se održati kad za to dođe vrijeme ili neće.

To je isto za obećanja u JavaScript-u. Kad u JavaScript definiramo obećanje, ono će se razriješiti kad za to dođe vrijeme ili će biti odbijeno.

Obećanja u JavaScript-u

Prije svega, Obećanje je objekt. Postoje 3 stanja objekta Promise:

  • Na čekanju: početno stanje, prije nego što obećanje uspije ili ne uspije
  • Riješeno: Dovršeno obećanje
  • Odbijeno: Neuspjelo obećanje

Primjerice, kada podatke tražimo od poslužitelja pomoću Obećanja, oni će biti u načinu na čekanju dok ne primimo svoje podatke.

Ako postignemo dobivanje podataka s poslužitelja, obećanje će biti uspješno riješeno. Ali ako ne dobijemo informacije, tada će obećanje biti odbijeno.

Uz to, ako postoji više zahtjeva, nakon što se prvo Promise riješi (ili odbije), započet će novi postupak kojem ga možemo pridružiti izravno metodom koja se naziva chaining.

Ako želite, također možete pogledati video verziju u nastavku:

Koja je razlika između povratnih poziva i obećanja?

Glavna razlika između funkcija povratnog poziva i obećanja je ta da povratni poziv pridružujemo obećanju umjesto da ga prosljeđujemo. Dakle, i dalje koristimo funkcije povratnog poziva s Promises, ali na drugačiji način (lančano).

To je jedna od najvećih prednosti korištenja obećanja, ali zašto?

Što je Chaining?

Funkcije povratnog poziva koriste se same za asinkrone operacije u JavaScriptu već dugi niz godina. Ali u nekim slučajevima je korištenje Obećanja bolja opcija.

Ako treba obaviti višestruke asinkrone operacije i ako za njih pokušamo koristiti stare stare povratne pozive, brzo ćemo se naći u situaciji zvanoj Callback pakao:

firstRequest(function(response) { secondRequest(response, function(nextResponse) { thirdRequest(nextResponse, function(finalResponse) { console.log('Final response: ' + finalResponse); }, failureCallback); }, failureCallback); }, failureCallback);

Međutim, ako obrađujemo istu operaciju s Promises, budući da možemo priložiti povratne pozive umjesto da ih prosljeđujemo, ovaj put isti kod gore izgleda mnogo čišći i lakši za čitanje:

firstRequest() .then(function(response) { return secondRequest(response); }).then(function(nextResponse) { return thirdRequest(nextResponse); }).then(function(finalResponse) { console.log('Final response: ' + finalResponse); }).catch(failureCallback);

Kôd malo iznad pokazuje kako se više povratnih poziva mogu povezati jedan za drugim. Chaining je jedno od najboljih obilježja obećanja.

Stvaranje i korištenje obećanja korak po korak

Prvo, koristimo konstruktor za stvaranje objekta Promise:

const myPromise = new Promise();

Potrebna su dva parametra, jedan za uspjeh (rješenje) i jedan za neuspjeh (odbijanje):

const myPromise = new Promise((resolve, reject) => { // condition });

Napokon, postojat će uvjet. Ako je uvjet ispunjen, Obećanje će biti riješeno, u protivnom će biti odbijeno:

const myPromise = new Promise((resolve, reject) => { let condition; if(condition is met) { resolve('Promise is resolved successfully.'); } else { reject('Promise is rejected'); } });

Tako smo stvorili svoje prvo obećanje. Sada se poslužimo.

then () za razriješena obećanja:

Ako ponovno posjetite sliku na početku ovog posta, vidjet ćete da postoje 2 slučaja: jedan za razriješena obećanja i jedan za odbijena. Ako se Obećanje riješi (slučaj uspjeha), tada će se nešto dogoditi sljedeće (ovisi o tome što učinimo s uspješnom Obećanjem).

myPromise.then();

Metoda then () poziva se nakon što se riješi Promise. Tada možemo odlučiti što ćemo učiniti s razriješenim Obećanjem.

Na primjer, prijavimo poruku na konzolu koju smo dobili od Promise:

myPromise.then((message) => { console.log(message); });

catch () za odbijena obećanja:

Međutim, metoda then () je samo za razriješena obećanja. Što ako Promise ne uspije? Zatim, trebamo upotrijebiti metodu catch ().

Isto tako prilažemo metodu then (). Također možemo izravno priložiti metodu catch () odmah nakon toga ():

myPromise.then((message) => { console.log(message); }).catch((message) => { console.log(message); });

Dakle, ako obećanje bude odbijeno, preći će na catch () metodu i ovaj put ćemo vidjeti drugu poruku na konzoli.

Zamotati

Dakle, na ovaj način izrađujemo obećanje u JavaScript-u i koristimo ga za riješene i odbijene slučajeve. Obećanja su šira tema i o njima se može naučiti mnogo više stvari. Dakle, razumijevanje njihovog rada zahtijeva vrijeme.

Ovaj je post samo uvod u Obećanja i nadam se da vam je korisno za dobivanje ideje o tome što su JavaScript obećanja i kako ih koristiti.

Ako želite saznati više o web razvoju, slobodno posjetite moj Youtube kanal za više informacija.

Thank you for reading!