Tilbakeringinger og løfter | Forklart med eksempler

JavaScript er et programmeringsspråk på høyt nivå som utfører synkront, noe som betyr at kode utføres linje for linje. De neste kodelinjene kan ikke utføre når den forrige kodelinjen er fullt utført. Imidlertid kan vi også implementere asynkron kode der en kodeblokk kan utføres sammen med den originale kodetråden slik at utførelsen av koden kan gjøres parallelt. For å implementere asynkron kode vi bruker tilbakeringinger og løfter I JavaScript.

I dette innlegget vil vi se hva som er tilbakeringinger og løfter i JavaScript forklart ved hjelp av eksempler.

Hva er tilbakeringinger?

Tilbakeringinger er funksjoner som sendes innenfor argumentene til andre funksjoner, denne prosedyren er gyldig i JavaScript fordi funksjoner er objekter og objekter kan sendes som argumenter til funksjoner. Den grunnleggende strukturen i tilbakeringingsfunksjonen ser ut som dette.

funksjon demofunksjon (tilbakeringing)
Ring tilbake();

Utføresekvens og behov for tilbakeringinger

Tilbakeringingsfunksjoner brukes til å skaffe kontroll over utførelsessekvensen. Generelt utføres funksjoner på grunnlag av sekvensen som de påberopes, ikke på sekvensen de er definert. For eksempel:

funksjon JOB1 ()
konsoll.Logg ("Jeg er oppgave 1");

funksjon Job3 ()
konsoll.Logg ("Jeg er oppgave 3");

funksjon JOB2 ()
konsoll.Logg ("Jeg er oppgave 2");

Job1 ();
Job2 ();
Job3 ();

Du vil få følgende utdata:

Men hva om vi bare vil påkalle oppgave 2 når oppgave 1 er ferdig med behandlingen. For det trenger vi tilbakeringingsfunksjoner og noen grunnleggende forståelse av asynkron utførelse.

Et eksempel på tilbakeringing i aksjon

Tenk på følgende kode:

var medlemmer = ["John Doe", "Sam Smith", "Allie Cartel"];
funksjon addNewMember (newuser)
medlemmer.Push (Newuser);

funksjon getAllMembers ()
konsoll.logg (medlemmer);

addNewMember ("alfa");
getAllMembers ();

Vi jobber med en rekke som inneholder listen over medlemmer av en sosial klubb, og vi har to funksjoner. Den ene funksjonen som skriver ut listen over alle medlemmene og den andre, brukes til å legge til et medlem på listen.

La oss endre denne koden for å få den til å etterligne oppførselen til ekte databaser og forsinkelser i nettverk som etterslep og pinger.

var medlemmer = ["John Doe", "Sam Smith", "Allie Cartel"];
funksjon addNewMember (newuser)
setTimeout (funksjon ()
medlemmer.Push (Newuser);
konsoll.log ("medlem lagt til");
, 200);

funksjon getAllMembers ()
setTimeout (funksjon ()
konsoll.Logg ("Medlemmer er:");
konsoll.logg (medlemmer);
, 100);

addNewMember ("alfa");
getAllMembers ();

Som du ser bruker denne koden setTimeout () funksjon for å etterligne forsinkelser av databaser. Adduseren tar omtrent 2 sekunder og GetAllMembers () Funksjonen tar 1 sekund.

Vi ønsker å legge til en ny bruker “alfa” og skrive ut listen etter at medlemmet er lagt til, ikke før, og det er derfor vi bruker sekvensen:

addNewMember ("alfa");
getAllMembers ();

Kjør koden, så får du følgende utdata:

Listen ble skrevet ut først, og deretter ble medlemmet lagt til. Dette fordi programmet ikke ventet på addMember () Funksjon for å fullføre behandlingen. Nå hvis vi bruker tilbakeringingsfunksjoner for å utføre GetAllMembers () funksjon først etter AddNewMember () er ferdig, koden vår blir:

var medlemmer = ["John Doe", "Sam Smith", "Allie Cartel"];
funksjon addNewMember (Newuser, tilbakeringing)
setTimeout (funksjon ()
medlemmer.Push (Newuser);
konsoll.log ("medlem lagt til");
Ring tilbake();
, 200);

funksjon getAllMembers ()
setTimeout (funksjon ()
konsoll.Logg ("Medlemmer er:");
konsoll.logg (medlemmer);
, 100);

addNewMember ("Alpha", getAllMembers);

Hvis du ser på koden, vil du se det inne i AddNewMember () Funksjon Vi tar et tilbakeringingsargument, dette vil sikre at tilbakeringingsfunksjonen blir utført i vår ønskede sekvens.

Utgangen fra ovennevnte kodebit er som:

Det nye medlemmet ble lagt til først, og deretter ble hele listen skrevet ut på konsollen. Det er slik du kan bruke tilbakeringinger for å få kontroll over utførelsessekvensen.

Hva er løfter?

Et løfte er et objekt og er noe som blir gjort/fullført i fremtiden. I JavaScript er det nøyaktig det samme som i det virkelige liv. De Syntaks av et løfte i JavaScript er gitt nedenfor:

var mypromise = nytt løfte (funksjon (løs, avvis)
// Noe kode
);

Som det fremgår av Promise Syntax, godtar Promise -konstruktøren bare tilbakeringingsfunksjonen som et argument. Løsnings- og avvisende parametere brukes i tilbakeringingsfunksjonen, med besluttsomhet som blir kalt når aktivitetene som utføres i tilbakeringingsfunksjonen er vellykket. Hvis prosedyren ikke lykkes, kalles avvisning imidlertid.

La oss for eksempel anta at moren din lover deg å skaffe deg en sykkel på bursdagen din. Det løftet er hennes garanti for at hun vil kjøpe deg en sykkel på bursdagen din, men når tiden kommer, kan hun ombestemme seg. Så hun kan kjøpe deg en sykkel eller ikke. Dette er et løfte på enkelt lekmannsspråk. Når vi ser på dette eksemplet kan vi identifisere tre stater/ muligheter for et løfte i JavaScript:

• Oppfylt: sykkel er kjøpt. Resultatverdi
• Venter: Bursdagen din har ikke kommet, og du er ikke sikker på om moren din vil kjøpe deg en sykkel eller ikke. Udefinert
• Avvist: Sykler er ikke kjøpt for deg på bursdagen din. Feil.

For bedre å forstå løfter, la oss gå gjennom en eksempel:

Vi vil ta dette eksemplet trinn for trinn I-E Først vil vi lage et Promise-objekt ved å bruke Promise Constructor som sett i syntaksen til Promise Over. Deretter vil vi bruke det Promise -objektet.

I koden nedenfor vil vi skape et løfteobjekt:

// Opprette Promise Object
var mypromise = nytt løfte (funksjon (løs, avvis)
const nummer1 = 2;
const nummer2 = 2;
// sammenligne to tall
if (nummer1 === nummer2)
// Operasjon vellykket
Løse();
annet
// Feil oppsto
avvise ();

);

I koden ovenfor, først opprettet vi et Promise -objekt MyPromise, og passerte deretter en tilbakeringingsfunksjon inne i Promise Constructor. I funksjonen sjekker vi om to tall er like eller ikke. Hvis tallene er like, vil samtalen bli løst, ellers hvis en feil kommer, vil samtalen bli avvist.

Å bruke Promise -objektet (MyPromise) Vi trenger "lover forbrukere”(Konsumere løfter ved å registrere funksjoner) kjent som deretter() metode for oppfyllelse og å fange() Metode for avvisning. Koden nedenfor illustrerer dette:

MyPromise.
da (funksjon ()
konsoll.logg ("tall like. Suksess");
).
fangst (funksjon ()
konsoll.logg ('feil');
);

Hvis tallene som blir sjekket er like, er .deretter() Metoden vil bli påberopt og vi vil se “Tall like. Suksess”. Imidlertid, hvis tallene ikke er like, så .å fange() metoden vil bli påberopt, og vi vil se Feil melding i konsollvinduet.

Hele koden er gitt nedenfor:

// Opprette Promise Object
var mypromise = nytt løfte (funksjon (løs, avvis)
const nummer1 = 2;
const nummer2 = 2;
// sammenligne to tall
if (nummer1 === nummer2)
// Operasjon vellykket
Løse();
annet
// Feil oppsto
avvise ();

);
// Bruk Promise Object
MyPromise.
da (funksjon ()
konsoll.logg ("tall like. Suksess");
).
fangst (funksjon ()
konsoll.logg ('feil');
);

Fra utgangen kan vi se at tallene er like.

Konklusjon

For å implementere asynkron kode i JavaScript bruker vi tilbakeringingsfunksjoner og løfter. En tilbakeringingsfunksjon blir gitt som et argument til en annen funksjon, mens løfte er noe som oppnås eller fullføres i fremtiden. I JavaScript er et løfte et objekt, og vi bruker Promise Constructor for å initialisere et løfte. For å bruke løfteobjekter tar vi hjelp fra løfte forbrukere som er deretter() metode (hvis løfte oppfylt) og å fange() Metode (hvis løfte blir avvist).