Javascript-Beloften begrijpen

Inleiding tot Beloften

een belofte wordt gewoonlijk gedefinieerd als een proxy voor een waarde die uiteindelijk beschikbaar zal komen.

Beloften zijn een manier om met asynchrone code om te gaan, zonder vast te zitten in de callback hel.

Promises maken al jaren deel uit van de taal (gestandaardiseerd en ingevoerd in ES2015), en zijn onlangs meer geïntegreerd geworden, met async en wait in ES2017.,

Async-functies gebruiken Beloften achter de schermen, dus begrijpen hoe Beloften werken is fundamenteel om te begrijpen hoe async en await werken.

hoe Beloften werken, in het kort

zodra een belofte is aangeroepen, zal het in een wachtende staat beginnen. Dit betekent dat de aanroepende functie blijft uitvoeren, terwijl de belofte in afwachting is totdat deze is opgelost, waardoor de aanroepende functie alle gegevens krijgt die werden gevraagd.,

de gemaakte belofte zal uiteindelijk eindigen in een opgeloste status, of in een geweigerde Status, waarbij de respectievelijke callback-functies worden aangeroepen (doorgegeven aan then en catch) na het voltooien.

welke js API ‘ s gebruiken promises?

naast uw eigen code en libraries code, worden promises gebruikt door standaard moderne Web API ‘ s zoals:

De batterij API
de Fetch API
Servicewerkers

Het is onwaarschijnlijk dat u in modern JavaScript geen promises gebruikt, dus laten we er meteen in duiken.,

het Maken van een belofte

De Belofte API maakt een Belofte constructor, die u initialiseren met behulp van new Promise():

Zoals je kan zien dat de belofte controleert de done globale constante, en als dat waar is, de belofte gaat om een opgelost staat (sinds de resolve terugbellen werd genoemd); anders, de reject terugbellen is uitgevoerd, waardoor de belofte in van een verworpen staat., (Als geen van deze functies in het uitvoeringspad wordt aangeroepen, blijft de belofte in een wachtende status)

met resolve en reject kunnen we de beller vertellen wat de resulterende belofte-status was en wat ermee te doen. In het bovenstaande geval hebben we net een string geretourneerd, maar het kan ook een object zijn, of null. Omdat we de belofte in het bovenstaande fragment hebben gemaakt, is het al begonnen met uitvoeren. Dit is belangrijk om te begrijpen wat er gaande is in de sectie consumeren van een belofte hieronder.,

een meer algemeen voorbeeld dat u tegenkomt is een techniek genaamd Promisifying. Deze techniek is een manier om een klassieke JavaScript functie te kunnen gebruiken die een callback neemt, en het een belofte terug te geven:

in recente versies van Node.js, je hoeft niet te doen deze handmatige conversie voor een groot deel van de API. Er is een promisifying functie beschikbaar in de util module die dit voor je zal doen, gezien het feit dat de functie die je promisifyt de juiste handtekening heeft.,

consumeren van een belofte

in de laatste sectie hebben we geïntroduceerd hoe een belofte wordt gemaakt.

laten we nu eens kijken hoe de belofte kan worden verbruikt of gebruikt.

het uitvoeren van checkIfItsDone() geeft functies op die moeten worden uitgevoerd wanneer de isItDoneYet belofte wordt opgelost (in de then aanroep) of weigert (in de catch aanroep).

Chaining promises

een belofte kan worden geretourneerd naar een andere belofte, waardoor een keten van Beloften wordt gecreëerd.,

een goed voorbeeld van chaining promises is de Fetch API, die we kunnen gebruiken om een resource te krijgen en een keten van promises in de wachtrij te zetten wanneer de resource wordt opgehaald.

De Fetch API is een op belofte gebaseerd mechanisme, en het aanroepen van fetch() is gelijk aan het definiëren van onze eigen belofte met new Promise().

voorbeeld van chaining promises

in dit voorbeeld noemen we fetch() om een lijst van TODO-items te krijgen van het todos.json bestand gevonden in het domein root, en we maken een keten van promises.,

Running fetch() geeft als resultaat een reactie, die heeft veel eigenschappen, en binnen die we referentie:

status een numerieke waarde die de HTTP-status code
statusText, een statusbericht dat is OK indien de aanvraag is gelukt

response heeft ook json() methode en het resultaat is een belofte dat de oplossing met de inhoud van het lichaam verwerkt en omgezet in JSON.,de eerste belofte in de keten is een functie die we gedefinieerd hebben, genaamd status(), die de responsstatus controleert en als het geen succesrespons is (tussen 200 en 299), verwerpt het de belofte.

Deze bewerking zal ervoor zorgen dat de promise chain alle geketende Beloften overslaat en zal direct naar het catch() statement onderaan overslaan, waarbij de Request failed tekst samen met de foutmelding wordt opgeslagen.,

als dat in plaats daarvan lukt, roept het de json() functie aan die we hebben gedefinieerd. Aangezien de vorige belofte, wanneer succesvol, het response object retourneerde, krijgen we het als invoer voor de tweede belofte.

in dit geval retourneren we de gegevens die JSON verwerkt heeft, dus de derde belofte ontvangt de JSON direct:

.then((data) => { console.log('Request succeeded with JSON response', data)})

en we loggen het gewoon op de console.

het verwerken van fouten

in het voorbeeld, in de vorige sectie, hadden we een catch dat was toegevoegd aan de keten van Beloften.,

wanneer iets in de keten van Beloften faalt en een fout oproept of de belofte afwijst, gaat de controle naar het dichtstbijzijnde catch() statement langs de keten.

Cascading errors

Als u binnen de catch() Een fout oproept, kunt u een tweede catch() toevoegen om het af te handelen, enzovoort.

new Promise((resolve, reject) => { throw new Error('Error')}) .catch(err => { throw new Error('Error') }) .catch(err => { console.error(err) })

Orkestrating promises

Promise.,all ()

als u verschillende Beloften wilt synchroniseren, helpt Promise.all() u een lijst met beloften te definiëren en iets uit te voeren als ze allemaal opgelost zijn.

voorbeeld:

met de ES2015-destructietoewijzing syntaxis kunt u ook

Promise.all().then(() => { console.log('Results', res1, res2)})

u bent niet beperkt tot het gebruik van fetch natuurlijk kan elke belofte op deze manier worden gebruikt.

Promise.,race()

Promise.race() draait wanneer de eerste van de beloften die je aan hem doorgeeft, wordt opgelost, en het draait de bijgevoegde callback slechts één keer, met het resultaat van de eerste belofte opgelost.,

Voorbeeld:

Algemene fouten

Onbekende TypeError: undefined is niet een belofte

Als je de Uncaught TypeError: undefined is not a promise fout in de console, zorg ervoor dat u gebruik new Promise() in plaats van alleen Promise()

UnhandledPromiseRejectionWarning

Dit betekent dat een belofte die je genoemd afgewezen, maar er was geen catch gebruikt voor het verwerken van de fout. Voeg een catch toe na de overtreding then om dit correct af te handelen.