Promise-klassen i JavaScript

I den här artikeln förklarar vi Promise-klassen i JavaScript.

YouTube Video

Promise

Promise-klassen är en klass för att hantera asynkrona operationer. Den hanterar resultat om operationen lyckas eller felhantering om den misslyckas. Traditionellt användes callback-funktioner när du behövde vänta på att en asynkron operation skulle slutföras, men Promise gör detta tydligare och kraftfullare.

1const promise = new Promise((resolve, reject) => {
2    setTimeout(() => resolve("Done!"), 1000);
3});
4
5// Displays "Done!" after 1 second
6promise.then(result => console.log(result));

• Den här koden är ett exempel på en asynkron process som visar "Färdig!" efter en sekund.
  • Först skapas ett nytt Promise-objekt med hjälp av new Promise. Argumentet är en funktion som tar två återanrop: resolve för framgång och reject för misslyckande.
  • setTimeout används för att anropa resolve() efter en sekund.
  • then()-metoden av promise-objektet väntar på slutförande och visar resultatet.

Grundläggande struktur

Ett Promise är ett objekt som slutligen resulterar i antingen framgång eller misslyckande.

 1const promise = new Promise((resolve, reject) => {
 2    // Asynchronous operation
 3    // Flag indicating whether the operation was successful
 4    const success = true;
 5
 6    if (success) {
 7        resolve('Operation successful!');
 8    } else {
 9        reject('An error occurred');
10    }
11});

• Vid framgång anropas resolve().
• Vid misslyckande anropas reject().

Promise-objektet har tre tillstånd.

1promise
2    .then((result) => {
3        console.log(result);
4    })
5    .catch((error) => {
6        console.error(error);
7    })

• Väntande
  • Den asynkrona processen har ännu inte slutförts.
• Uppfylld
  • Den asynkrona processen lyckades och resultatet returnerades av resolve(). Resultatet tas emot med hjälp av then()-metoden.
• Avvisad
  • Den asynkrona processen misslyckades och ett fel uppstod via reject(). Felet tas emot med hjälp av catch()-metoden.

then()- och catch()-metoder

Med hjälp av en Promise kan du definiera vad som ska göras när en asynkron operation slutförs. För detta använder du then()- och catch()-metoderna.

then()

1const promise = new Promise((resolve, reject) => {
2    resolve('Operation successful!');
3});
4
5promise.then((result) => {
6    console.log(result);  // "Operation successful!"
7});

• then()-metoden anger en funktion som ska anropas när Promise lyckas.

catch()

1const promise = new Promise((resolve, reject) => {
2    reject('An error occurred');
3});
4
5promise.catch((error) => {
6    console.error(error);  // "An error occurred"
7});

• catch()-metoden anger en funktion som ska anropas när Promise misslyckas.

finally()-metoden

 1const promise = new Promise((resolve, reject) => {
 2    resolve('Operation successful!');
 3});
 4
 5promise
 6    .then((result) => {
 7        console.log(result);
 8    })
 9    .catch((error) => {
10        console.error(error);
11    })
12    .finally(() => {
13        console.log('The operation has completed');
14    });

• finally()-metoden definierar kod som kommer att köras i slutet oavsett om Promise lyckades eller misslyckades.

then()-kedja

then() returnerar ett nytt Promise, så du kan kedja nästa then().

 1const promise = new Promise((resolve, reject) => {
 2    setTimeout(() => {
 3        resolve(1);
 4    }, 1000);
 5});
 6
 7promise
 8    .then(result => {
 9        console.log(result); // 1
10        return result + 1;
11    })
12    .then(result => {
13        console.log(result); // 2
14        return result + 1;
15    })
16    .then(result => {
17        console.log(result); // 3
18    })
19    .catch(error => {
20        console.error(error.message); // Something went wrong
21    });

• I den här koden skickar den första resolve() värdet 1, och varje värde som returneras av en then skickas vidare till nästa then.
• Med hjälp av catch() kan du hantera eventuella fel som uppstår i kedjan på ett och samma ställe.

Praktiskt exempel

Till exempel används Promises ofta för att hämta data från en server. Låt oss titta på ett exempel med fetch()-API:n.

 1fetch('https://codesparklab.com/json/example.json')
 2    .then(response => {
 3        if (!response.ok) {
 4            throw new Error('Network error');
 5        }
 6        return response.json();
 7    })
 8    .then(data => {
 9        console.log(data);
10    })
11    .catch(error => {
12        console.error('Error:', error);
13    });

• I det här exemplet, eftersom fetch() returnerar ett Promise, används then() för att bearbeta datan efter att ha fått svar från servern. Fel hanteras med catch().

Hantering av flera Promise

Promise.all()

För att köra flera Promises samtidigt och fortsätta endast om alla lyckas, använd Promise.all().

 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 om alla Promises lyckas. catch() anropas om en enda misslyckas.

Promise.allSettled()

Om du vill köra flera Promise samtidigt och få alla resultat oavsett om de lyckas eller misslyckas, använd Promise.allSettled().

 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 Promise har avslutats (antingen uppfyllda eller avvisade). Varje resultat innehåller en status-egenskap ('fulfilled' eller 'rejected'). Även om några misslyckas påverkar det inte de andra operationerna.

Promise.race()

Promise.race() returnerar resultatet av den Promise som avgörs först, oavsett om den uppfylls eller avvisas.

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 av det första avslutade Promise.

Relation till async/await

Genom att använda async/await-syntax kan du skriva Promises mer intuitivt. En async-funktion returnerar alltid ett Promise, och await väntar på att Promise ska lösas.

 1async function fetchData() {
 2    try {
 3        const response = await fetch('https://codesparklab.com/json/example.json');
 4        const data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error('Error :', error);
 8    }
 9}
10
11fetchData();

Genom att använda async/await på detta sätt kan asynkrona operationer skrivas som synkron kod, vilket gör det lättare att läsa.

Sammanfattning

• Promise är ett objekt för att hantera framgång eller misslyckande av asynkrona operationer.
• Hantera framgångsrika operationer med then() och fel med catch().
• finally() definierar kod som körs i slutet oavsett framgång eller misslyckande.
• Du kan hantera flera Promises tillsammans genom att använda Promise.all() eller Promise.race().
• async/await är syntax för att skriva Promises på ett enklare sätt.

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