Articles

een snelle introductie tot “Promises” en”Async/Await”(met nieuwe functies)

een promise is een instantie (object) van de Promise klasse (constructor). Om een belofte te maken, gebruiken we new Promise(executor) syntaxis en bieden we een uitvoerfunctie als argument. Deze executor functie biedt een middel om het gedrag van onze belofte resolutie of afwijzing te controleren.

in TypeScript kunnen we het gegevenstype opgeven van de waarde die wordt geretourneerd wanneer de belofte wordt vervuld. Aangezien de fout die door de belofte wordt geretourneerd elke vorm kan aannemen, wordt het standaard gegevenstype van de waarde die wordt geretourneerd wanneer de belofte wordt afgewezen ingesteld op any door het TypeScript.

om het resolutietype van de promise te annoteren, gebruiken we een generic type declaratie. In principe beloof je een type met Promise constructor in de vorm van new Promise<Type>() wat het gevonden waardetype van de belofte aangeeft. Maar u kunt ook let p: Promise<Type> = new Promise() syntaxis gebruiken om hetzelfde te bereiken.

💡 we hebben genericaklassen in detail besproken in de Genericaklassen.

(promise.ts)

in het bovenstaande voorbeeld is findEven een belofte die werd gemaakt met behulp van de Promise constructor die na 1 seconde oplost. Het gevonden gegevenstype van deze belofte is number, vandaar dat de TypeScript-compiler u niet toestaat om resolve functie aan te roepen met een andere waarde dan een waarde van het typenummer number.

het standaardtype van de afstotingswaarde van de belofte is any, dus het aanroepen van reject functie met een willekeurige waarde is legaal. Dit is het standaard gedrag van TypeScript, en je kunt de discussie thread hier vinden als je je eigen meningen hebt.

aangezien we het number als het gegevenstype van succesvolle promise-resolutie hebben opgegeven, zal de TypeScript-compiler het number type leveren aan het argument van value argument van de then callback methode.

de callback in dethen methode wordt uitgevoerd wanneer de belofte is opgelost en de callback incatch methode wordt uitgevoerd wanneer het een fout afwijst tijdens het oplossen van de belofte. De methode finally registreert een callback die wordt uitgevoerd wanneer promise wordt opgelost of geweigerd.

als de TypeScript-compiler klaagt over de finally methode, betekent dit dat uw TypeScript-compiler geen typedefinities importeert voor de finally methode. Deze methode werd geïntroduceerd in ES2016, dus het is vrij nieuw. Andere functies van de Promise API die in deze les worden gebruikt zijn vrij nieuw, dus zorg ervoor dat uw tsconfig.json bestand alle nieuwe bibliotheken heeft geladen.

(tsconfig.json)

In mijn tsconfig.json heb ik de standaardbibliotheek ES2020 geladen. Dit biedt ondersteuning voor alle JavaScript-functies tot ES2020. Als u meer wilt weten over het tsconfig.json bestand of standaard bibliotheken, lees dan de compilatie les (binnenkort).

Promise Chaining

dethencatch en finally geven impliciet een belofte terug. Elke waarde die door deze callback functies wordt geretourneerd, wordt omwikkeld met een belofte en geretourneerd, inclusief undefined. Deze impliciete belofte wordt standaard opgelost, tenzij je opzettelijk een nieuwe belofte teruggeeft van deze methoden die zouden kunnen mislukken.

daarom kunt u thencatch of finally methoden toevoegen aan een van de vorige thencatch of finally methode. Als een impliciete belofte wordt geretourneerd door een van deze methoden, dan is het opgeloste waardetype van deze impliciete belofte het type van de geretourneerde waarde. Laten we een snel voorbeeld zien.

(promise-chaining.ts)

we hebben het vorige voorbeeld gewijzigd en een andere then methode toegevoegd aan de eerste then methode. Aangezien de eerstethen methode een waarde van typestring retourneert, zal de impliciete belofte die met deze methode wordt geretourneerd, worden opgelost met een waarde van het typestring. Daarom zal de tweede then methode value argument van het type string ontvangen zoals u kunt zien in de resultaten.

Promise.resolve

deresolve statische methode van dePromise aanroep geeft een belofte terug die al succesvol is opgelost met een waarde die u opgeeft in dePromise.resolve(value) aanroep. Dit is makkelijker dan het maken van een nieuwe instantie van de belofte aanroep en het toevoegen van logica om de belofte onmiddellijk op te lossen.

(promise-resolve.ts)

zoals u kunt zien uit de bovenstaande resultaten, lost de belofte die wordt geretourneerd door de Promise.resolve(value) aanroep altijd onmiddellijk op met een number waarde aangezien het value argument het type number.

Promise.reject

vergelijkbaar met Promise.resolve statische methode, geeft de Promise.reject(error) Methode altijd een afgewezen belofte terug. De waarde van de promise rejection is afkomstig van het error argument en het type is any.

(promise-reject.ts)

het type belofte dat wordt geretourneerd door de Promise.reject methode is Promise<never> omdat deze belofte nooit oplost, dus er zal geen promise-resolutiewaarde zijn. Daarom is het type van de waarde opgelost door de belofte never als never betekent de waarde die nooit voorkomt.

Promise.alle

in sommige scenario ‘ s heb je te maken met meerdere Beloften. Als u een callback functie wilt uitvoeren wanneer alle beloften succesvol zijn opgelost, gebruik dan de Promise.all statische methode.

var pAll = Promise.all()pAll.then( ( ) => {___});

de Promise.all methode neemt een array (iterable precise) van beloften en geeft een nieuwe belofte terug. De geretourneerde belofte pAll wordt opgelost wanneer alle beloften p1, p2, ... succesvol zijn opgelost. Deze belofte wordt opgelost met een array waarde die de promise resolutiewaarden bevat van p1, p2, ... in de volgorde van hun uiterlijk.

(promise-all.ts)

zoals u kunt zien in het bovenstaande voorbeeld, Promise.all methode is generiek en het neemt het type van de waarde opgelost door elke belofte geleverd aan het. Het verstrekken van een generiek type is heel handig wanneer we de opgeloste waarde van deze collectieve belofte gebruiken, zoals je kunt zien aan het bovenstaande resultaat.

💡 De meeste statische methoden van de Promise klasse zijn generiek, zoals in de onderstaande voorbeelden wordt aangetoond.

er is één voorbehoud met Promise.all. Het implementeert het fail-fast mechanisme, wat betekent dat als een van de invoerbeloften p1, p2, ... wordt geweigerd, pAll wordt geweigerd. Als zal niet wachten op andere hangende Beloften op te lossen.

(promise-all-reject.ts)

zoals u kunt zien aan het bovenstaande resultaat, werd de derde belofte net na 1 seconde afgewezen, de allPromise onmiddellijk afgewezen.

Promise.allSettled

DePromise.allSettled statische methode is vergelijkbaar metPromise.all maar in tegenstelling totPromise.all, wacht het totdat alle beloften zijn afgewikkeld (wat betekent totdat ze opgelost of afgewezen zijn). Vandaar dat de belofte die wordt geretourneerd door Promise.allSettled nooit zal weigeren (maar we hebben catch blok in het onderstaande voorbeeld toch toegevoegd).

(promise-all-settled.ts)

werken met promise.allSettled kan een beetje overweldigend zijn zoals u kunt met het bovenstaande programma en het resultaat. Ten eerste, allSettle methode geeft een belofte terug die oplost met een array van PromiseSettledResult<type> waarden wanneer alle beloften zijn afgewikkeld. De type is afgeleid van het type van de invoerbelofte. Het PromiseSettledResult type ziet er hieronder uit.

deze typen worden geleverd door de standaardbibliotheek van TypeScript. Dus als een belofte wordt opgelost, converteert allSettled methode zijn waarde naar PromiseFulfilledResult vorm en als het mislukt, converteert het het naar PromiseRejectedResult vorm. Dat is de reden waarom als allSettled is opgelost, het een array van objecten is waarin elk object een vorm heeft van PromiseFulfilledResult of PromiseRejectedResult interface.

aangezien PromiseFulfilledResult Een Unie is van PromiseFulfilledResult en PromiseRejectedResult die gemeenschappelijke status eigenschap van letterlijke gegevenstype heeft, kunnen we het gebruiken als een discriminant in de switch/case Guard.

💡 we hebben het gehad over switch/case type guard en discriminerende vakbonden in de type systeem les.

(promise-alles geregeld.ts)

Promise.race

de Promise.race neemt een array (exact herhalbaar) van beloften en geeft een nieuwe belofte terug die oplost of afwijst zodra een van de invoer belooft oplost of afwijst. Met andere woorden, de belofte geretourneerd door Promise.race wordt verrekend met het resultaat van een van de invoerbeloften die snel settelt.

(promise-race.ts)

In tegenstelling tot Promise.all of Promise.allSettled geeft deze methode slechts één waarde van de eerste afgewikkelde belofte terug, vandaar dat het type van de geretourneerde belofte Promise<number> in het bovenstaande geval is. Sinds de eerste belofte als eerste is afgewikkeld, wordt dethen callback van defastestPromise aangeroepen na 500ms met de waarde van de opgeloste belofte.

💡 De nieuwe Promise.any() methode heeft Fase 4 van het ECMAScript-voorstel bereikt. Promise.any lijkt veel op Promise.race maar het wacht tot de eerste belofte succesvol is opgelost. Deze methode gooit een AggregateError uitzondering als alle beloften worden afgewezen.