Articles
Introduksjon til TypeScript
Promise-klassen i TypeScript

Promise-klassen i TypeScript

Denne artikkelen forklarer Promise-klassen i TypeScript.

YouTube Video

Promise

Promise-klassen i TypeScript er i utgangspunktet den samme som Promise i JavaScript. En Promise er en innebygd klasse for å håndtere asynkrone operasjoner og representerer resultatet av en asynkron operasjon når den fullføres. Her forklarer vi grunnleggende bruk av Promises og relaterte konsepter.

Grunnleggende bruk

Opprette en Promise:

Et Promise-objekt brukes til å kapsle inn asynkrone operasjoner. En Promise opprettes med new Promise(executor), og den utfører asynkrone operasjoner inni seg. ‘executor’ tar to funksjoner, ‘resolve’ og ‘reject’, som argumenter.

1const myPromise = new Promise<number>((resolve, reject) => {
2    // Perform asynchronous operations
3    const success = true; // This is just an example
4    if (success) {
5        resolve(42); // In case of success
6    } else {
7        reject('Failed'); // In case of failure
8    }
9});

Bruke en Promise:

Den opprettede Promise behandles ved hjelp av then() og catch().

1myPromise.then((value) => {
2    console.log(`Success: ${value}`); // Process the value passed with resolve
3}).catch((error) => {
4    console.error(`Error: ${error}`); // Handle the error passed with reject
5});

finally()-metoden 

 1const myPromise = new Promise<number>((resolve, reject) => {
 2    // Perform asynchronous operations
 3    const success = false; // This is just an example
 4    if (success) {
 5        resolve(42); // In case of success
 6    } else {
 7        reject('Failed'); // In case of failure
 8    }
 9});
10
11myPromise.then((value) => {
12    console.log(`Success: ${value}`); // Process the value passed with resolve
13}).catch((error) => {
14    console.error(`Error: ${error}`); // Handle the error passed with reject
15}).finally(() => {
16    console.log('The operation has completed');
17});
  • finally()-metoden definerer kode som alltid vil bli kjørt uansett om Promise blir oppfylt eller avslått.

Kjede Promises:

Ved å kjede then() etter then() kan du koble flere asynkrone operasjoner i serie.

 1const myPromise = new Promise<number>((resolve, reject) => {
 2    // Perform asynchronous operations
 3    const success = true; // This is just an example
 4    if (success) {
 5        resolve(42); // In case of success
 6    } else {
 7        reject('Failed'); // In case of failure
 8    }
 9});
10
11myPromise
12    .then((value) => {
13        console.log(`Success: ${value}`);
14        return value + 1; // Pass the value to the next then
15    })
16    .then((newValue) => {
17        console.log(`New value: ${newValue}`);
18    })
19    .catch((error) => {
20        console.error(`Error: ${error}`);
21    });

async/await:

I TypeScript kan du håndtere Promises mer direkte ved hjelp av async/await. Innenfor en async-funksjon kan du bruke nøkkelordet await for å vente på resultatet av en Promise.

 1const myPromise = new Promise<number>((resolve, reject) => {
 2    // Perform asynchronous operations
 3    const success = true; // This is just an example
 4    if (success) {
 5        resolve(42); // In case of success
 6    } else {
 7        reject('Failed'); // In case of failure
 8    }
 9});
10
11async function asyncFunction() {
12    try {
13        const value = await myPromise;
14        console.log(`Success: ${value}`);
15    } catch (error) {
16        console.error(`Error: ${error}`);
17    }
18}
19
20asyncFunction();

Promise-metoder

Promise.all()

Promise.all utfører flere Promises samtidig og venter til alle er oppfylt.

 1const promise1 = Promise.resolve(1);
 2const promise2 = Promise.resolve(2);
 3const promise3 = Promise.resolve(3);
 4
 5Promise.all([promise1, promise2, promise3])
 6    .then((results) => {
 7        console.log(results);  // [1, 2, 3]
 8    })
 9    .catch((error) => {
10        console.error('Error :', error);
11    });
  • then() blir kun kalt når alle Promises er oppfylt. catch() blir kalt hvis én eller flere feiler.

Promise.race()

Promise.race returnerer resultatet av den første Promise som fullføres blant flere Promises.

1const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
2const promise2 = new Promise((resolve) => setTimeout(resolve, 500, 'Second'));
3
4Promise.race([promise1, promise2]).then((result) => {
5    console.log(result);  // "First"
6});
  • Som i dette eksempelet, returneres resultatet av den første Promise som fullføres.

Promise.allSettled()

Promise.allSettled venter på at alle Promises er ferdige og returnerer et array med alle resultater, både oppfylte og avviste.

 1const promise1 = Promise.resolve(1);
 2const promise2 = Promise.reject("Failed");
 3const promise3 = Promise.resolve(3);
 4
 5Promise.allSettled([promise1, promise2, promise3])
 6    .then((results) => {
 7        results.forEach(result => console.log(result));
 8        // [
 9        //   { status: 'fulfilled', value: 1 },
10        //   { status: 'rejected', reason: 'Failed' },
11        //   { status: 'fulfilled', value: 3 }
12        // ]
13    });
  • then() kalles når alle Promises er fullført (enten oppfylt eller avvist). Hver resultat inkluderer en status-egenskap ('fulfilled' eller 'rejected'). Feil påvirker ikke de andre operasjonene.

Promise.any()

Promise.any venter til den første Promise er oppfylt og returnerer den.

 1const promise1 = new Promise((resolve) => setTimeout(() => resolve("A ok"), 300));
 2const promise2 = new Promise((_, reject) => setTimeout(() => reject("B fail"), 100));
 3const promise3 = new Promise((resolve) => setTimeout(() => resolve("C ok"), 200));
 4
 5Promise.any([promise1, promise2, promise3])
 6    .then(value => {
 7        // Logs the first fulfilled value ("C ok")
 8        console.log("first fulfilled:", value);
 9    })
10    .catch(err => {
11        console.log("should not reach here in this example:", err);
12    });
  • Den returnerer den første oppfylte verdien blant flere Promises.

Sammendrag

Ved å bruke TypeScript kan du spesifisere typene for Promises riktig, noe som lar deg skrive mer typesikre programmer. Dette hjelper med å fange opp feil tidlig under utviklingen ved å spesifisere typen verdi som en Promise returnerer på forhånd.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Feilhåndtering i TypeScript