Forstå async/vent -funksjoner i JavaScript | Forklart med eksempler

Nøkkelordet async brukes til å konvertere en funksjon til en async -funksjon samtidig som avvente nøkkelord er bare brukbart inne i en async funksjon. Async and awent brukes til asynkron utførelse av programmet og implementere en løftedrevet funksjonalitet til koden.

Async nøkkelord når det brukes fra å definere en funksjon gjør at funksjonen returnerer en Love, samtidig som avvente Funksjon får async -funksjonen til å vente på at et løfte blir returnert inni den. For å forstå bruken av asynk.

Asynk.

Sekvensiell utførelse i JavaScript

JavaScript er et sekvensielt utført, eller vi kan si entrådet skriptspråk. Koden påberopes linje for linje på prosessuell måte.

Tenk på kodelinjene som er skrevet nedenfor:

funksjon hei ()
konsoll.Logg ("Hello World");
Linuxhint ();

funksjon linuxHint ()
konsoll.Log ("Tutorial av Linuxhint");

konsoll.logg ("kode utføres i sekvensen som den påkalles");
Hallo();

Observer utgangen på konsollen som:

Som du ser, ble funksjonene eller linjene som ble påkalt først alltid ferdige først. Årsaken til at du viser et enkelt eksempel som dette var å få deg til å legge merke til når utførelsessekvensen vil endre seg med async venter og løfter.

Async/ avventer i aksjon

Tenk på en enkel funksjon som returnerer litt tekst, som:

funksjon getUser ()
konsoll.logg ("Inne i getUsers -funksjonen");
returnere "brukere";

konsoll.Logg ("Start av koden");
var liste = getUsers ();
konsoll.logg (liste);
konsoll.logg ("slutten av koden");

Utgangen til følgende kode er:

Som vi kan se funksjonen returnert som strengen som sier, brukere. La oss prøve å legge nøkkelordet async Før funksjonsdefinisjon som:

async funksjon getUsers ()
konsoll.logg ("Inne i getUsers -funksjonen");
returnere "brukere";

Nå, på konsollen din, vil du se at denne gangen returnerte funksjonen et løfte som hadde statusen “oppfylt”:

Men i tilfeller der du henter noen data fra noen REST API eller et hvilket som helst Web API, vil dette løftet endre flere stater, fra verserende til oppfylt/avvist. I slike tilfeller venter vi på tilbakekomsten av løftets resultat ved å bruke avvente nøkkelord.

For dette skal vi bruke Fetch API og hente informasjonen om brukere fra “API.github/brukere ”med følgende kodelinjer:

async funksjon getUsers ()
konsoll.logg ("Inne i getUsers -funksjonen");
Const Response = Await Fetch ("https: // API.github.com/brukere ");
konsoll.Log ("API svarte, brukere brukere");
const brukere = venter på svar.json ();
konsoll.Logg ("Konvertert JSON");
returnerer brukere;

Det er mange ting som må forklares her:

• Når en ny variabel initialiseres med denne funksjonen, blir den første linjen utført og tekst vil bli skrevet ut på konsollen.
• Når koden når nøkkelordet avvente Den vil sjekke om løftet er oppfylt eller verserende, hvis det er i ventende tilstand, vil den avslutte denne funksjonen og utføre andre deler av koden.
• Etter å ha utført andre deler av koden, vil den komme tilbake i funksjonen ved det første avvente nøkkelordet og kontrollere lovens status.
• Når du mottar en oppfylt/avvist status, vil den utføre neste linje som er konsoll.Logg().
• I neste linje, respons.JSON er også et løfte, den vil sjekke for statusen og ved ventende status, vil den avslutte funksjonen og utføre de andre delene av koden.
• Etter at all den andre koden er utført, vil pekeren komme tilbake i funksjonen, sjekk statusen til respons.JSON, og på oppfylt/avvist status vil den utføre neste linje.

På denne måten vil hele programmet forlate den normale sekvensielle utførelsen og implementere en asynkron utførelse av koden ved å bruke løfter og async/avventer nøkkelord.

Det komplette kodebiten er som:

async funksjon getUsers ()
konsoll.logg ("Inne i getUsers -funksjonen");
Const Response = Await Fetch ("https: // API.github.com/brukere ");
konsoll.Log ("API svarte, brukere brukere");
const brukere = venter på svar.json ();
konsoll.Logg ("Konvertert JSON");
returnerer brukere;

konsoll.logg ("kode starter");
var liste = getUsers ();
konsoll.logg ("variabel liste opprettet");
konsoll.logg (liste);
liste.da ((bruker) => konsoll.logg (bruker));
konsoll.logg ("siste linje i koden");

Merk: Køen "liste.da ((bruker) => konsoll.logg (bruker));”Vil ikke bli utført før funksjonen getUsers håndterer alle løftene og returnerer verdien, selv her vil den sekvensielle utførelsen endre.

Hvis du kjører dette programmet som et skript i en HTML -fil, vil du se følgende utdata på konsollen din:

Undersøk utgangen nøye, og du vil merke strømmen av utførelse som:

• Koden starter og variabelen er deklarert på funksjonen.
• Pekeren går inn i funksjonen, skriver ut den første linjen, ser avvente Nøkkelord, etterlater funksjonen og returnerer et ventende løfte til variabelen “liste”At vi nettopp opprettet.
• Utfører andre deler av koden (det er grunnen til at du kan se “Siste linje i koden”) Mens du venter på løftet i avvente.
• Ser linjen liste.deretter() men det vil ikke bli utført før funksjonen getUsers Returnerer et løfte med en status løst/avvist.
• Går tilbake i funksjonen, svarer API, oppretter en liste over brukere og konverterer den til JSON.
• Statusen til løftene som er gitt av async -funksjonen getUsers endringer i oppfylt og liste.deretter() Linje utført og vi får skrevet ut JSON -dataene på konsollen.

Det er slik du endrer sekvensiell utførelse og implementerer asynkron utførelse

Konklusjon

Async og avvente Nøkkelord brukes til å implementere asynkron utførelse av JavaScript -koden ved hjelp av løfter. Async nøkkelord når den brukes før erklæringen om en funksjon konverterer den som fungerer til en async -funksjon og dens returtype endres til et løfte. Samtidig som avvente er et nøkkelord som venter på at et løfte blir mottatt inne i en async -funksjon. Async/avventer Hjelp oss å skrive løfter på en mye finere og ryddig måte som er mer lesbar og forståelig.