Asynkrone iteratorer vs asynkrone generatorer i JavaScript
I JavaScript, Asynkrone iteratorer og Asynkrone generatorer Tilby den samme funksjonaliteten som effektivt kan implementeres ved hjelp av JavaScript -språket primitiver. Så hvorfor ikke velge en enkel løsning i stedet for å sette deg selv i en annen forvirring?
Dette innlegget diskuterer asynkrone iteratorer vs asynkrone generatorer i JavaScript sammen med passende eksempler. Så la oss starte!
Iteratorer i JavaScript
I JavaScript, “Iteratorer”Brukes til å få tilgang til synkrone datastrukturer som matriser, kart og sett. De er først og fremst basert på "Neste ()”Metode, som omfatter to egenskaper:“NESTE”Og“verdi”:
- “verdi”Eiendom av Neste () Metode indikerer gjeldende verdi i iterasjonssekvensen.
- “Ferdig”Eiendom av Neste () Metode representerer iterasjonsstatusen, hvor "falsk”Indikerer at iterasjonsprosessen er fullført og“ekte”Betegner at iterasjonen er ufullstendig.
Nå vil vi sjekke ut arbeidene til iteratorer i JavaScript ved hjelp av et eksempel.
Eksempel: Bruke iteratorer i JavaScript
Vi vil lage en “tall”Objekt som har to egenskaper:“start”Og“slutt”. Deretter vil vi legge til en "iterasjonsevne" til "tall”Objekt ved å bruke“Symbol.iterator ()”Metode.
“Symbol.iterator ()”Metoden vil bli påkalt en gang, i begynnelsen av“for ... av”Loop, og returnerer et iterable objekt. Etter å ha utført denne operasjonen, "for ... av”Loop vil få tilgang til det iterable objektet og hente verdiene i iterasjonssekvensen:
La tall =Start: 1,
Slutt: 4,
[Symbol.iterator] ()
komme tilbake
Nåværende: dette.start,
Sist: dette.slutt,
neste ()
hvis dette.nåværende <= this.last)
retur gjort: falsk, verdi: dette.Nåværende ++;
annet
return gjort: true;
;
;
Ovennevnte, “Neste ()”Metoden vil bli påkalt og returnere“verdi”Som et objekt:
for (la verdien av tall)Varsel (verdi);
Skriv ut den medfølgende koden i konsollvinduet og utfør den:
Vi har med hell iterert over hvert element i "tall”Objekt som kan sees i følgende GIF:
Som nevnt tidligere, kan vanlige JavaScript -iteratorer hjelpe deg med å iterere over synkrone data. Hva om verdiene kommer asynkront på grunn av noen forsinkelse? I et slikt scenario må du implementere Asynkrone iteratorer I JavaScript.
Asynkrone iteratorer i JavaScript
De asynkrone iteratorene er innebygd i ES9 for å håndtere de asynkrone datakildene. Det fungerer som den vanlige iteratoren bortsett fra at "Neste ()”Metode i en asynkron iterator returnerer en“Love”Som løser“verdi”Og“Ferdig”Egenskaper verdier av et objekt.
Konverter vanlig iterator til asynkron iterator i JavaScript
Hvis du vil konvertere en vanlig iterator til en asynkron iterator, så følg de undergitte instruksjonene:
- I stedet for å bruke “Symbol.Iterator ()”Metode, bruk”Symbol.Asynciterator ()”.
- Tvinge “Neste ()”Metode for å returnere en Love og legg til en "async”Nøkkelord med det som:“async neste ()”.
- Til slutt "for avvente ... av”Loop kan brukes til å iterere over et objekt, i stedet for“for ... av" Løkke.
Eksempel: Asynkrone iteratorer i JavaScript
Vi vil nå konvertere den vanlige iteratoren som er definert i forrige eksempel til asynkrone iteratorer ved å følge de spesifiserte reglene.
For dette formålet vil vi erstatte “Symbol.Iterator ()" med "Symbol.Asynciterator ()”Metode. Deretter vil vi legge til nøkkelordet "async" før "Neste ()”Metode. Ved hjelp av "avvente”I“Neste ()”Metoden vil sette tiden for å oppfylle løftet etter“2”Sekunder:
La tall =Start: 1,
Slutt: 4,
[Symbol.asynciterator] ()
komme tilbake
Nåværende: dette.start,
Sist: dette.slutt,
async neste ()
AwaitNewPromise (Resolve => SetTimeout (Resolve, 2000));
hvis dette.nåværende <= this.last)
retur gjort: falsk, verdi: dette.Nåværende ++;
annet
return gjort: true;
;
;
For iterasjon over et asynkron iterable objekt, "for avvente ... av”Loop vil bli brukt på følgende måte:
(async () =>for avvente (la verdien av tall)
Varsel (verdi);
) ()
Utgangen vil vise de itererte verdiene i varslingsboksen etter en forsinkelse på to sekunder:
På dette tidspunktet har du forstått arbeidet med asynkrone iteratorer. Nå vil vi gå videre og lære om Asynkrone generatorer I JavaScript.
Generatorer i JavaScript
Iteratorer i JavaScript er ganske nyttige; De trenger imidlertid nøye programmering for å utføre sin forventede funksjonalitet. De JavaScript Generator -funksjon er et annet kraftig verktøy som lar deg definere en iterativ algoritme ved hjelp av en enkelt "ikke-kontinuerlig”Funksjon.
Opprinnelig utfører en generatorfunksjon ikke koden når den påberopes; I stedet returnerer den en bestemt type iterator kjent som “Generator”. Generatorfunksjonen kan påberopes så mange ganger som nødvendig, og på hver samtale returnerer den en ny "Generator,”Som kan itereres en gang.
For å skrive generatorfunksjonen, “funksjon*”Syntaks brukes. Denne funksjonen omfatter også en "utbytte”Operatør som tar en utførelse av generatorfunksjonen til neste verdi av et objekt blir bedt om.
Eksempel: Bruke generatorer i JavaScript
Vi vil definere en “generator”Funksjon som returnerer verdiene fra en“Utgangspunktet" til "Endingpoint" bruker "utbytte”Operatør. “*”Lagt til med“funksjon”Søkeord indikerer at“generator()”Er en generatorfunksjon, ikke en normal vanlig funksjon.
funksjon* generator (utgangspunkt, sluttpunkt)for (la i = utgangspunkt; i<= endingPoint; i++)
avkastning i;
I neste trinn vil vi påkalle "generator()”Funksjon som returnerer en generator som er lagret i“x”Objekt:
La x = generator (1, 5);Til slutt, å iterere over "x”Generator, vi bruker“for ... av" Løkke:
for (const num av x)konsoll.logg (num);
Utførelse av det medfølgende programmet vil vise de itererte verdiene:
Hvis du vil hente løftebaserte resultater fra "Generator“Du må bruke“Asynkron generator”I JavaScript -programmet.
Asynkrone generatorer i JavaScript
Asynkron generator I JavaScript fungerer det som generatorfunksjonen bortsett fra at "Neste ()”Metode i asynkron generator returnerer en“Love”Som løser“verdi”Og“Ferdig”Egenskaper verdier av et objekt.
Konverter generatorfunksjon til asynkron iterator i JavaScript
Følg de undergitte instruksjonene for å konvertere en generatorfunksjon til en asynkron iterator i JavaScript:
- Bruk "async" før "funksjon*”Nøkkelord.
- I stedet for en “verdi”,“utbytte”Bør returnere en“Love”.
Nå vil vi vise deg den praktiske prosedyren for å konvertere en generatorfunksjon til asynkrone generatorer i JavaScript.
Eksempel: asynkrone generatorer i JavaScript
Først av alt vil vi legge til “async”Nøkkelord før du definerer“AsyncSequence ()”Asynkron funksjon. AsyncSequence () gir en “Love”Som vil bli oppfylt på ett sekund:
asyncfunction* asyncsequence (utgangspunkt, sluttpunkt)for (la jeg = utgangspunkt; i
setTimeout (() =>
Løs (i);
, 1000);
);
Til slutt, “for avvente ... av”Loop brukes til å iterere over og returnere den asynkrone generatoren:
(async () =>La x = asyncekvens (1, 5);
for avvente (la NUM av x)
konsoll.logg (num);
) ();
Dette JavaScript -programmet vil returnere verdier fra “1" til "5”Mens du tar et gap på“en" sekund:
Vi har gitt den essensielle informasjonen relatert til Asynkrone iteratorer og Asynkrone generatorer. Begge kan imidlertid brukes til å iterere over asynkrone data i JavaScript; Det kan være utfordrende for nybegynnere å opprettholde den interne logikken eller definisjonen av de asynkrone iteratorene, mens de asynkrone generatorene tilbyr en mer effektiv og mindre utsatt for feil måte å bruke iteratorer. Det skjuler også Iterators kompleksitet og gjør kode kortfattet og lesbar.
Så vi anbefaler deg Bruk asynkrone generatorer å håndtere iterasjoner relatert til asynkron datainnsamling.
Konklusjon
Asynkron iterators og Asynkrone generatorer brukes til å iterere over dataene, gitt etter en viss tid. De asynkrone iteratorene utfører “Symbol.Asynciterator ()”Metode for å returnere en“iterator”, Mens de asynkrone generatorene returnerer en spesiell type iterator”Generator”I seg selv, som kan brukes uansett hvor iterasjonen er påkrevd. Denne oppskrivningen diskuterte asynkrone iteratorer og asynkrone generatorer i JavaScript.