JavaScript Promise Tutorial: Løs, afvis og lænkning i JS og ES6

Løfter er en af ​​måderne, vi kan håndtere asynkrone operationer i JavaScript på. Mange mennesker kæmper med at forstå, hvordan løfter fungerer, så i dette indlæg vil jeg forsøge at forklare dem så enkelt som muligt.

Løfter er et bredt emne, så jeg kan ikke gå i detaljer i denne artikel. Men du finder en samlet introduktion til hvad løfter er, forklaringer på udtryk som løsning, afvisning og sammenkædning og et kodeeksempel til oprettelse og brug af løfter.

Forudsætning: For at forstå denne artikel bedre, se mit andet indlæg om JavaScript-tilbagekald.

Hvad er et løfte?

Et løfte i JavaScript svarer til et løfte i det virkelige liv. Når vi giver et løfte i det virkelige liv, er det en garanti for, at vi vil gøre noget i fremtiden. Fordi løfter kun kan gives for fremtiden.

Et løfte har 2 mulige resultater: det vil enten blive holdt, når tiden kommer, eller det vil det ikke.

Dette er også det samme for løfter i JavaScript. Når vi definerer et løfte i JavaScript, løses det, når tiden kommer, eller det bliver afvist.

Løfter i JavaScript

Først og fremmest er et løfte et objekt. Der er 3 stater i Promise-objektet:

  • Afventer: Startstatus, før løftet lykkes eller mislykkes
  • Løst: Afsluttet løfte
  • Afvist: Mislykket løfte

For eksempel, når vi anmoder om data fra serveren ved hjælp af et løfte, vil de være i afventende tilstand, indtil vi modtager vores data.

Hvis vi opnår at hente oplysningerne fra serveren, løses løftet med succes. Men hvis vi ikke får oplysningerne, vil løftet være i den afviste tilstand.

Derudover, hvis der er flere anmodninger, så begynder en ny proces, efter at det første løfte er løst (eller afvist), hvor vi kan vedhæfte det direkte ved hjælp af en metode kaldet sammenkædning.

Hvis du foretrækker det, kan du også se videoversionen nedenfor:

Hvad er forskellen mellem tilbagekald og løfter?

Den største forskel mellem tilbagekaldsfunktioner og løfter er, at vi knytter et tilbagekald til et løfte i stedet for at give det. Så vi bruger stadig tilbagekaldsfunktioner med Promises, men på en anden måde (chaining).

Dette er en af ​​de største fordele ved at bruge løfter, men hvorfor?

Hvad er lænkning?

Callback-funktioner har været brugt alene til asynkrone operationer i JavaScript i mange år. Men i nogle tilfælde kan brug af løfter være en bedre mulighed.

Hvis der er flere asynkoperationer, der skal udføres, og hvis vi prøver at bruge gode gamle tilbagekald til dem, finder vi os hurtigt inde i en situation kaldet Callback helvede:

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

Men hvis vi håndterer den samme operation med Promises, da vi kan vedhæfte tilbagekald i stedet for at videresende dem, ser denne kode ovenfor denne gang meget renere og lettere at læse ud:

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

Koden lige ovenfor viser, hvordan flere tilbagekald kan kædes sammen efter hinanden. Kæde er en af ​​de bedste funktioner i løfter.

Oprettelse og brug af et løfte trin for trin

For det første bruger vi en konstruktør til at oprette et løfteobjekt:

const myPromise = new Promise();

Det tager to parametre, en for succes (løsning) og en for fejl (afvis):

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

Endelig vil der være en betingelse. Hvis betingelsen er opfyldt, løftes løftet, ellers afvises det:

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

Så vi har oprettet vores første løfte. Lad os nu bruge det.

derefter () for løste løfter:

Hvis du besøger billedet igen i begyndelsen af ​​dette indlæg, vil du se, at der er to sager: En for løste løfter og en for afvist. Hvis løftet løses (succes sag), så sker der noget næste (afhænger af hvad vi gør med det vellykkede løfte).

myPromise.then();

Den daværende () metode kaldes efter løftet er løst. Så kan vi beslutte, hvad vi skal gøre med det løste løfte.

Lad os for eksempel logge beskeden til konsollen, som vi fik fra løftet:

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

catch () for afviste løfter:

Imidlertid er den daværende () metode kun til løste løfter. Hvad hvis løftet mislykkes? Derefter skal vi bruge metoden catch ().

Ligeledes vedhæfter vi den derefter () metode. Vi kan også direkte vedhæfte catch () -metoden lige efter derefter ():

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

Så hvis løftet bliver afvist, springer det til catch () -metoden, og denne gang vil vi se en anden besked på konsollen.

Pak ind

Så det er sådan, vi opretter et løfte i JavaScript og bruger det til afklarede og afviste sager. Løfter er et bredere emne, og der er mange flere ting at lære om dem. Så det tager tid at forstå, hvordan de arbejder.

Dette indlæg er kun en introduktion til løfter, og jeg håber, du fandt det nyttigt at få en idé om, hvad JavaScript-løfter er, og hvordan man bruger dem.

Hvis du vil lære mere om webudvikling, er du velkommen til at besøge min Youtube-kanal for mere.

Tak fordi du læste!