Promise-klassen i JavaScript

I denne artikel forklarer vi Promise-klassen i JavaScript.

YouTube Video

Promise

Promise-klassen er en klasse til håndtering af asynkrone operationer. Den håndterer resultater, hvis operationen lykkes, eller fejlbehandling, hvis den fejler. Traditionelt blev callback-funktioner brugt, når man skulle vente på, at en asynkron operation blev færdig, men Promise gør dette mere klart og kraftfuldt.

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

• Denne kode er et eksempel på en asynkron proces, der viser "Færdig!" efter ét sekund.
  • Først oprettes et nyt Promise-objekt ved hjælp af new Promise. Argumentet er en funktion, der tager to callbacks: resolve for succes og reject for fejl.
  • setTimeout bruges til at kalde resolve() efter ét sekund.
  • then()-metoden på promise-objektet venter på afslutning og viser resultatet.

Grundlæggende Struktur

En Promise er et objekt, der til sidst resulterer i enten succes eller fejl.

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

• I tilfælde af succes kaldes resolve().
• I tilfælde af fejl kaldes reject().

Promise-objektet har tre tilstande.

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

• Afventer
  • Den asynkrone proces er endnu ikke afsluttet.
• Opfyldt
  • Den asynkrone proces lykkedes, og resultatet blev returneret af resolve(). Resultatet modtages ved hjælp af then()-metoden.
• Afvist
  • Den asynkrone proces mislykkedes, og en fejl opstod via reject(). Fejlen modtages ved hjælp af catch()-metoden.

then()- og catch()-metoder

Med et Promise kan du definere, hvad der skal gøres, når en asynkron operation er fuldført. Til dette bruger du metoderne then() og catch().

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 specificerer en funktion, der skal kaldes, når Promise lykkes.

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 specificerer en funktion, der skal kaldes, når Promise fejler.

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 definerer kode, der vil blive eksekveret til sidst, uanset om Promise lykkedes eller fejlede.

then()-kæde

then() returnerer en ny Promise, så du kan kæde den næste 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 denne kode videresender den første resolve() værdien 1, og hver værdi, der returneres af en then, sendes videre til den næste then.
• Ved at bruge catch() kan du håndtere enhver fejl, der opstår i kæden, ét sted.

Praktisk Eksempel

For eksempel bruges Promises ofte til at hente data fra en server. Lad os se på et eksempel med fetch() API'et.

 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 denne kode, da fetch() returnerer en Promise, bruges then() til at behandle data, efter at der er modtaget et svar fra serveren. Fejl håndteres ved hjælp af catch().

Håndtering af Flere Promises

Promise.all()

For at udføre flere Promises samtidigt og kun fortsætte, hvis alle lykkes, brug 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() kaldes kun, hvis alle Promises lykkes. catch() kaldes, hvis blot én fejler.

Promise.allSettled()

Hvis du vil køre flere Promises samtidigt og få alle resultater uanset om de lykkes eller fejler, skal du bruge 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() bliver kaldt, når alle Promises er afgjort (enten opfyldt eller afvist). Hvert resultat indeholder en status-egenskab ('fulfilled' eller 'rejected'). Selv hvis nogle fejler, påvirker det ikke de andre operationer.

Promise.race()

Promise.race() returnerer resultatet af den Promise, der først bliver afklaret, uanset om den opfyldes eller afvises.

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 fuldførte Promise.

Forholdet til async/await

Ved at bruge async/await syntaksen kan du skrive Promises mere intuitivt. En async funktion returnerer altid en Promise, og await venter på, at Promise afsluttes.

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

Ved at bruge async/await på denne måde kan asynkrone operationer skrives som synkron kode, hvilket gør det lettere at læse.

Sammendrag

• Promise er et objekt til håndtering af succes eller fejl i asynkrone operationer.
• Håndter vellykkede operationer med then() og fejl med catch().
• finally() definerer kode, der udføres til sidst, uanset om det lykkes eller ej.
• Du kan håndtere flere Promises sammen ved at bruge Promise.all() eller Promise.race().
• async/await er en syntaks til at skrive Promises mere enkelt.

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