Promises, async/await en de fetch-API met een stapsgewijze tijdlijn van de event loop en 15 voorbeelden die u kunt bewerken en uitvoeren: JSON, formulieren, fouten, parallelle requests, AbortController en opnieuw proberen.
Een promise staat voor een resultaat dat later binnenkomt. async-functies geven promises terug, en await pauzeert die functie tot er een is afgehandeld. fetch(url) geeft een promise van een Response terug: controleer response.ok en await daarna response.json(). Zet awaits in try en catch, gebruik Promise.all voor parallelle requests en AbortController om te annuleren.
Het patroon dat de meeste pagina's nodig hebben
Begin met de tijdlijn om te zien waarom code na een await eerder kan draaien dan die await. Bewerk daarna een willekeurig voorbeeld en het draait meteen opnieuw. Requests hier gebruiken data:-URL's of nepservers, dus er verlaat niets uw browser.
Er is geen verschil in wat ze kunnen: async/await is gebouwd bovenop promises. Een async-functie geeft altijd een promise terug, en await pakt er een uit. Het leest als gewone stapsgewijze code, waardoor fouten makkelijker af te handelen zijn met try en catch.
fetch behandelt elk HTTP-antwoord als een geslaagd request, want de server heeft geantwoord. Het wordt alleen gerejected bij netwerkfouten of een geannuleerd request. Controleer response.ok of response.status zelf.
Promise-callbacks gaan naar de microtask-wachtrij, die na het huidige script volledig wordt leeggemaakt. Een timercallback is een task, die wacht op de volgende ronde van de event loop.
Maak een AbortController, geef controller.signal mee in de fetch-opties en roep controller.abort() aan. De fetch-promise wordt gerejected met een fout met de naam AbortError.
Ja, binnen JavaScript-modules (script type="module" of elke gebundelde ES-module). In klassieke scripts zet u de code in een async-functie.
Synchrone regels draaien eerst, dan elke promise-callback in de wachtrij (microtasks), dan de timer (een task). Verander de volgorde en voer het opnieuw uit.
Een promise wordt één keer afgehandeld: resolve geeft een waarde, reject geeft een fout. then en catch draaien later, nooit meteen.
await pauzeert alleen de async-functie waarin het staat. De regel na de aanroep van main() draait voordat main klaar is.
Binnen een async-functie gooit een gerejecte await een fout, dus gewone try en catch werken. finally is de plek om een spinner te verbergen.
fetch geeft een Response terug; .json() leest en parset de body, wat een tweede await is. Dit voorbeeld gebruikt een data:-URL, dus het werkt offline.
fetch wordt alleen gerejected als het request helemaal niet kan worden gedaan (offline, geblokkeerd, foute URL). Een 404 of 500 wordt normaal resolved met ok op false, dus controleer het altijd.
FormData leest elk veld met een naam. Hier wordt het request opgebouwd maar niet verstuurd, en de body wordt getoond zodat u precies ziet wat een server zou krijgen.
Verstuur JSON door het te stringifyen en zelf de Content-Type-header in te stellen; fetch doet geen van beide voor gewone objecten.
Welke promise-helper u gebruikt
Eén aanroep per keer awaiten telt de wachttijden bij elkaar op. Ze allemaal starten en Promise.all awaiten wacht maar zo lang als de traagste.
Promise.all wordt gerejected zodra er één faalt. allSettled wacht op alle en vertelt welke werkten, wat past bij dashboards met onafhankelijke widgets.
Honderden requests tegelijk afvuren kan rate limits activeren. Deze kleine pool houdt er maximaal drie tegelijk onderweg.
Geef controller.signal mee aan fetch en roep abort() aan om te stoppen. De promise wordt gerejected met een AbortError, die u meestal negeert.
AbortSignal.timeout(ms) maakt een signaal dat vanzelf afbreekt. Bij fetch is de foutnaam TimeoutError, zodat u het kunt onderscheiden van een annulering door de gebruiker.
Probeer alleen fouten opnieuw die kunnen overgaan, zoals een time-out of een 503, en wacht elke keer langer zodat een overbelaste server kan herstellen.
Wacht op een pauze in het typen en breek het vorige request af als een nieuw begint, zodat een oud, traag antwoord nooit een nieuwer kan overschrijven.
Hebt u een response die u moet lezen? Plak die in de
Call stack
Microtasks
Task-wachtrij
Console
Stap {i} van {n}.
Terug
Volgende stap
Pauzeren
Afspelen
Opnieuw
Gratis beginnen · Geen creditcard nodig