Articles
Introduktion till TypeScript
Promise-klassen i TypeScript

Promise-klassen i TypeScript

Den här artikeln förklarar Promise-klassen i TypeScript.

YouTube Video

Promise

Promise-klassen i TypeScript är i grund och botten densamma som Promise i JavaScript. En Promise är en inbyggd klass för att hantera asynkrona operationer och representerar resultatet av en asynkron operation när den är klar. Här förklarar vi grundläggande användning av Promises och relaterade koncept.

Grundläggande användning

Skapa en Promise:

Ett Promise-objekt används för att kapsla in asynkrona operationer. En Promise skapas med new Promise(executor) och kör asynkrona operationer inuti. Funktionen executor tar två funktioner, resolve och reject, som argument.

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});

Använda en Promise:

Den skapade Promise behandlas med then() och 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 definierar kod som alltid kommer att köras oavsett om Promise är uppfylld eller avvisad.

Koppla Promises:

Genom att koppla then() efter then() kan du ansluta flera asynkrona 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 hantera Promises mer enkelt med hjälp av async/await. Inom en async-funktion kan du använda nyckelordet await för att vänta 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 kör flera löften (Promises) samtidigt och väntar tills alla har uppfyllts.

 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() anropas endast när alla Promises har uppfyllts. catch() anropas om ens ett enda löfte misslyckas.

Promise.race()

Promise.race returnerar resultatet från det första löfte (Promise) som slutförs bland flera.

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 det här exemplet returneras resultatet för det första löfte (Promise) som slutförs.

Promise.allSettled()

Promise.allSettled väntar på att alla löften (Promises) ska slutföras och returnerar en array med alla resultat, både uppfyllda och avvisade.

 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() anropas när alla Promises har slutförts (antingen uppfyllda eller avvisade). Varje resultat innehåller en status-egenskap ('fulfilled' eller 'rejected'). Misslyckanden påverkar inte de andra operationerna.

Promise.any()

Promise.any väntar tills det första löftet (Promise) är uppfyllt och returnerar det.

 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 returnerar det första uppfyllda värdet bland flera Promises.

Sammanfattning

Genom att använda TypeScript kan du ange typerna för Promises på ett lämpligt sätt, vilket gör att du kan skriva mer typsäkra program. Detta hjälper till att fånga fel tidigt under utvecklingen genom att specificera typen av värde som en Promise returnerar i förväg.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

Felhantering i TypeScript