Articles
Introduktion til TypeScript
Promise-klassen i TypeScript

Promise-klassen i TypeScript

Denne artikel forklarer Promise-klassen i TypeScript.

YouTube Video

Promise

Promise-klassen i TypeScript er grundlæggende den samme som Promise i JavaScript. En Promise er en indbygget klasse til håndtering af asynkrone operationer og repræsenterer resultatet af en asynkron operation, når den afsluttes. Her forklarer vi den grundlæggende brug af Promises og relaterede begreber.

Grundlæggende Brug

Oprettelse af en Promise:

Et Promise-objekt bruges til at pakke asynkrone operationer ind. En Promise oprettes med new Promise(executor), og den udfører asynkrone operationer inden i den. executor tager to funktioner, 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});

Brug af en Promise:

Den oprettede Promise bearbejdes ved hjælp af 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 altid vil blive udført, uanset om Promise bliver opfyldt eller afvist.

Kædning af Promises:

Ved at kæde then() efter then() kan du forbinde flere asynkrone operationer 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 mere direkte ved hjælp af async/await. Inden i en async-funktion kan du bruge await-nøgleordet til at vente på resultatet af 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 udfører flere Promises samtidigt og venter, indtil alle er opfyldt.

 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() kaldes kun, når alle Promises er opfyldt. catch() kaldes, hvis blot én fejler.

Promise.race()

Promise.race returnerer resultatet af den første Promise, der afsluttes blandt 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 eksempel returneres resultatet af den første Promise, der bliver afsluttet.

Promise.allSettled()

Promise.allSettled venter på, at alle Promises er fuldført og returnerer et array med alle resultater, både opfyldte og afviste.

 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() bliver kaldt, når alle Promises er afsluttet (opfyldt eller afvist). Hvert resultat inkluderer en status-egenskab ('fulfilled' eller 'rejected'). Fejl påvirker ikke de andre operationer.

Promise.any()

Promise.any venter indtil den første Promise er opfyldt 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 opfyldte værdi blandt flere Promises.

Sammendrag

Ved at bruge TypeScript kan du angive typerne for Promises korrekt, hvilket giver dig mulighed for at skrive mere type-sikrede programmer. Dette hjælper med at fange fejl tidligt under udviklingen ved at angive typen af værdi, som en Promise returnerer, på forhånd.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Fejlhåndtering i TypeScript