Vad är ett Promise?

Ett Promise är en platshållare för ett framtida värde, vilket kan vara:

Ett promise börjar som pending och avslutas permanent som antingen fulfilled med ett värde eller rejected med en orsak.

Förstå metoderna resolve, reject och then()

Skapa ett Promise

För att skapa ett Promise skickar du in en funktion med två parametrar: resolve och reject. Dessa parametrar är funktioner som används för att indikera om den asynkrona operationen har slutförts framgångsrikt eller misslyckats.

const myPromise = new Promise((resolve, reject) => {
  const success = true; // Simulate whether the task is successful

  if (success) {
    resolve('Task completed successfully!');
  } else {
    reject('Task failed.');
  }
});

• resolve(value): Markerar att Promiset är uppfyllt (lyckat) och skickar resultatet (value);
• reject(error): Markerar att Promiset är avvisat (misslyckat) och skickar felet.

Använda then() för att hantera uppfyllda Promises:

När ett Promise har skapats kan resultatet hanteras med metoden then(). Denna metod anropas när Promiset är uppfyllt (resolved).

myPromise.then(result => {
  console.log(result); // Output: Task completed successfully!
});

I det här exemplet tar metoden then() emot värdet som skickas till resolve() och kör callback-funktionen med resultatet. Den körs endast om Promisen löses framgångsrikt.

Felhantering med .catch()

Promises erbjuder ett enkelt sätt att hantera fel genom metoden .catch(). Om en Promise avvisas (misslyckas) fångas och hanteras felet inuti .catch().

catch()-metoden används för att hantera fel när Promisen avvisas. Den fångar felet som skickas av reject() och gör det möjligt att hantera felhanteringsscenarier.

Kedjning av Promises för sekventiella asynkrona operationer

En av de viktigaste fördelarna med Promises är möjligheten att kedja dem, vilket gör det möjligt att hantera flera asynkrona operationer i följd utan att hamna i callback-helvetet. Varje then() returnerar en ny Promise, vilket gör det möjligt att kedja flera then()-anrop i en sekvens, med resultaten visade i HTML när varje Promise löses.

Sekventiella operationer: Varje then() returnerar ett nytt Promise och skickar resultatet från en operation till nästa. Detta möjliggör en tydlig, linjär sekvens av asynkrona operationer som uppdaterar den visade texten i HTML.

Felfångst: Metoden .catch() hanterar alla fel som uppstår under någon av Promise-lösningarna. Detta säkerställer att fel fångas upp och visas på sidan, oavsett var de inträffar i kedjan.

Varför använda Promises?

1. Undvika Callback Hell: Promises erbjuder ett renare och mer lättläst sätt att hantera asynkrona operationer än djupt nästlade callbacks;
2. Felfångst: Promises har inbyggd felfångst med .catch(), vilket gör det enkelt att hantera avvisade operationer;
3. Sekventiell kedjning: Promises gör det möjligt att köra flera asynkrona operationer i sekvens genom kedjning, vilket gör koden lättare att följa och underhålla.