Promise-klassen i JavaScript

I denne artikkelen forklarer vi Promise-klassen i JavaScript.

YouTube Video

Promise

Promise-klassen er en klasse for håndtering av asynkrone operasjoner. Den håndterer resultater hvis operasjonen lykkes, eller feilbehandling hvis den mislykkes. Tradisjonelt ble callback-funksjoner brukt når man måtte vente på at en asynkron operasjon skulle fullføres, men Promise gjør dette tydeligere og mer kraftfullt.

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 koden er et eksempel på en asynkron prosess som viser "Ferdig!" etter ett sekund.
  • Først opprettes et nytt Promise-objekt ved å bruke new Promise. Argumentet er en funksjon som tar to tilbakekall: resolve for suksess og reject for feil.
  • setTimeout brukes for å kalle resolve() etter ett sekund.
  • then()-metoden til promise-objektet venter på fullføring og viser resultatet.

Grunnleggende Struktur

Et Promise er et objekt som til slutt resulterer i enten suksess eller feil.

 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 tilfelle suksess blir resolve() kalt.
• I tilfelle feil blir reject() kalt.

Promise-objektet har tre tilstander.

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

• Venter
  • Den asynkrone prosessen er ikke fullført ennå.
• Fullført
  • Den asynkrone prosessen var vellykket, og resultatet ble returnert av resolve(). Resultatet mottas ved hjelp av then()-metoden.
• Avvist
  • Den asynkrone prosessen mislyktes, og en feil oppstod via reject(). Feilen mottas ved hjelp av catch()-metoden.

then()- og catch()-metoder

Ved bruk av en Promise kan du definere hva som skal gjøres når en asynkron operasjon fullføres. Til dette bruker du metodene 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 spesifiserer en funksjon som skal kalles 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 spesifiserer en funksjon som skal kalles når Promise mislykkes.

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 som vil bli utført til slutt uavhengig av om Promise lyktes eller mislyktes.

then()-kjede

then() returnerer et nytt Promise, så du kan kjedekoble neste 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 koden sender den første resolve() verdien 1, og hver verdi som returneres av en then, sendes til neste then.
• Ved å bruke catch() kan du håndtere enhver feil som oppstår i kjeden på ett sted.

Praktisk eksempel

For eksempel brukes ofte Promises til å hente data fra en server. La oss se på et eksempel ved å bruke 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 koden, siden fetch() returnerer en Promise, brukes then() til å behandle dataene etter å ha mottatt et svar fra serveren. Feil håndteres med catch().

Håndtering av flere Promises

Promise.all()

For å kjøre flere Promises samtidig og bare gå videre hvis alle lykkes, bruk 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() kalles kun hvis alle Promises lykkes. catch() kalles hvis til og med én feiler.

Promise.allSettled()

Hvis du vil kjøre flere Promise samtidig og få alle resultater uavhengig av suksess eller feil, bruk 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() kalles når alle Promise er ferdigbehandlet (enten oppfylt eller avslått). Hvert resultat inkluderer en status-egenskap ('fulfilled' eller 'rejected'). Selv om noen feiler, påvirker det ikke de andre operasjonene.

Promise.race()

Promise.race() returnerer resultatet til den Promise som avgjøres først, enten den blir oppfylt eller avvist.

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 fra den første ferdige Promise.

Forholdet mellom async/await

Ved å bruke syntaksen async/await kan du skrive Promises mer intuitivt. En async-funksjon returnerer alltid en Promise, og await venter på at Promise skal fullføres.

 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 å bruke async/await på denne måten kan asynkrone operasjoner skrives som synkrone koder, noe som gjør det lettere å lese.

Sammendrag

• Promise er et objekt for å håndtere suksess eller feil ved asynkrone operasjoner.
• Håndter vellykkede operasjoner med then() og feil med catch().
• finally() definerer kode som kjøres til slutt, uavhengig av suksess eller feil.
• Du kan håndtere flere Promises sammen ved å bruke Promise.all() eller Promise.race().
• async/await er en syntaks for å skrive Promises enklere.

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