javascript wacht

| | | |

Geïntroduceerd in ES6, stelt Promises je in staat om gemakkelijk asynchrone code te schrijven zonder dat je te maken krijgt met meerdere callback-functies. Met beloften hoeft u zich geen zorgen te maken over callbacks op meerdere niveaus die zowel moeilijk te schrijven als te onderhouden zijn.

Er is nog een functie in JavaScript die het nog gemakkelijker maakt om asynchrone code te schrijven met Promises: asynchrone functies / bijwonen. Deze - deze stellen je in staat om code te schrijven die synchrone looks uitvoert maar asynchrone routines heeft gemaakt.

In deze handleiding gaan we bespreken wat de asynchrone / wait-functie is en hoe je deze in je code kunt gebruiken. Laten we beginnen

Beloften: een opfriscursus

Voordat we beginnen te praten over asynchrone / wachtfuncties, moeten we de beloften samenvatten. Een belofte vertegenwoordigt een asynchrone bewerking. Geeft de code aan dat een bewerking wordt uitgevoerd en als de bewerking succesvol is, wordt een waarde geretourneerd. Anders wordt er een fout teruggestuurd naar de rest van het programma.

Een belofte vertegenwoordigt een waarde die niet bekend was op het moment dat de belofte werd gemaakt. Een belofte is precies dat: een belofte dat toekomstige waarden ‚Äã‚Äãworden teruggegeven aan uw code. Aangezien de belofte een object is, moet het in hoofdletters zijn.

Overweeg dit scenario. U moet een resource ophalen uit een API. Het duurt een seconde of twee om uw verzoek te verwerken. In plaats van dat de gebruiker wacht tot het verzoek is verwerkt, kunt u uw code naar een Promise verplaatsen zodat de rest van uw programma kan blijven functioneren.

Dit betekent dat u een deel van uw programma kunt blijven weergeven. website UI tijdens het extraheren van gegevens. Zodra een waarde is geretourneerd, wordt Promise naar uw hoofdprogramma verzonden.

Hier is een voorbeeld van een belofte:.

Onze code-feedback: uw cookies zijn verzonden! Wanneer we voer de methode sendCookies.then () uit, onze belofte wordt vrijgegeven. Ons programma wacht 1000 milliseconden en retourneert vervolgens de waarde "Uw cookies zijn verzonden!" " Ons hoofdprogramma

Async en Wait gebruiken

In een functie en async / wait, blokkeert een wait-statement voor code-uitvoering binnen zijn asynchrone functie tot `waarnaar een belofte wordt geretourneerd. Dit is de reden waarom ontwikkelaars beweren vaak dat asynchrone / asynchrone wachtfuncties maar kijken hoe asynchrone taken worden uitgevoerd.

Beschouw het volgende voorbeeld:.

Onze code feedback: uw cookies zijn verzonden! Onze functie sendCookies () heeft 1000 milliseconden nodig om de waarde "Uw cookies zijn verzonden" te retourneren. In dit geval hebben we een asynchrone functie gedeclareerd, zodat onze code wacht op een belofte die wordt opgelost of afgewezen.

De functie "async" Het sleutelwoord vertelt onze code dat we een asynchrone operatie in onze functie. Het "expectation"-woord - sleutel geeft aan dat onze code wacht op de belofte van sendCookies () voordat we doorgaan met het uitvoeren van ons programma.

Asynchrone functies retourneren altijd een belofte.

Async en With gebruiken Multiple Pass Wait

De asynchrone / wait-functies worden het vaakst gebruikt wanneer er meerdere beloften zijn waarmee u moet werken. Dit wordt soms ketenbeloften genoemd. Je code wacht inderdaad op een belofte om naar elke stap terug te keren voordat hij doorgaat naar de volgende:

Onze code geeft als resultaat:

Elke stap duurt 1000 volle milliseconden!. Onze functie sendCookies () wordt niet uitgevoerd tot de belofte van terugkeer van onze functie ProcessOrder () .

Asynchrone expressies

Er zijn drie manieren waarop u een asynchrone / wacht-functie kunt gebruiken.

De eerste is de benadering die we in onze laatste voorbeelden lieten zien: door functies te declareren. In onze voorbeelden hebben we functies gedeclareerd die een belofte teruggeven, dus gebruikten we de woorden "async" en "expectation" - key om deze functies uit te voeren

U kunt ook een asynchrone functie declareren met behulp van richtingsfuncties:

Deze code retourneert: Uw cookies zijn verzonden! dit is hetzelfde als ons eerste voorbeeld, maar in plaats van een hoofdfunctie () te declareren, hebben we een pijlfunctie gebruikt

Net als u kan de expressiesyntaxis van de functie gebruiken:.

Deze retourcode: Uw cookies zijn verzonden Zoals u kunt zien, de output is weer l of zichzelf. Het enige verschil is hoe we onze functie hebben gedeclareerd.

In feite lijkt deze syntaxis erg op ons laatste voorbeeld. We gebruiken gewoon het woord - key "function ()" in plaats van een boom-functie.

Er is geen betere manier om een asynchrone / wacht-functie te declareren. Het hangt allemaal af van het programma dat u schrijft en de syntaxis die u verkiest. Hoewel kan worden gesteld dat het sturen van functies de meest beknopte methode is, zijn andere manieren om een asynchrone / wachtfunctie te declareren in andere gevallen misschien beter.

Webverzoeken verwerken met Async / Wait

Een van de meest voorkomende toepassingen van de async / is wait-functie om webverzoeken te verwerken met een op belofte gebaseerde API, Fetch As (). U kunt meer lezen over het gebruik van fetch () in onze JavaScript-beginnersgids om te zoeken

Laten we dit voorbeeld nemen:

Onze code geeft als resultaat:

Als we onze functie retrieveComments () uitvoeren, gebruiken we de" wait " woord - key function to wait" uitvoering van onze fetch () statement. Dit betekent dat de rest van ons schema niet doorgaat totdat ons webverzoek is verwerkt. De functie retourneert inderdaad een belofte.

Wanneer een belofte wordt geretourneerd door de fetch () functie fetch (), we zetten de geretourneerde waarde om naar JSON. We identificeren vervolgens het object om een lijst met namen van alle opmerkingen op te halen en printen het naar de console

Hoe een fout afhandelen

O, ik wou dat de fouten niet in de code voorkwamen. Maar dat doen ze, en daar ontwikkelaars moeten we iets plannen. Asynchrone functie, foutafhandeling wordt uitgevoerd met behulp van een synchrone try ... catch. Overweeg deze code:.

Onze code geeft als resultaat:

In ons voorbeeld gebruikten we een .catch () als er een terugkwam. In dit geval gebruiken we required ("Error") om onze code te vertellen dat er een fout is opgetreden.

Als deze instructie wordt uitgevoerd, treedt onze .catch ()-declaratie in werking en wordt de fout afgedrukt.

Evenzo kunnen asynchrone functies syntaxisfouten detecteren:.

Onze code retourneert: NetworkError bij het ophalen van de bron. In dit voorbeeld hebben we een try / catch-statement gebruikt om te controleren of onze wait-methode een belofte van succes heeft opgeleverd. Nogmaals, onze API is ongeldig waardoor ons programma onze belofte afwijst. Wanneer dit gebeurt, wordt de "catch" uitgevoerd in ons try / catch-blok, dat onze fout in de console logt.

Conclusie

De asynchrone / wait-functies helpen bij het schrijven van asynchrone bewerkingen in de code. Wanneer een asynchrone functie is gedeclareerd, kunt u het "waiting" woord - sleutel gebruiken om de uitkomst van bewerkingen af te wachten. Het wait-sleutelwoord moet worden gebruikt met een functie die een belofte retourneert.

U bent nu klaar om gebruik asynchrone JavaScript-functies / Wacht als een expert!

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method