Frontend Academy · leksjon

Callbacks og callback hell

Forstå asynkron kode basert på callbacks, identifiser nøstingsproblemet som kalles callback hell, og se hvorfor Promises ble introdusert for å løse det.

Leksjon 2 av 413 trinn

Callbacks og callback hell er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva er callbacker?

En callback er en funksjon som sendes som argument til en annen funksjon, slik at den kan kalles senere når et arbeid er fullført. Callbacker er det opprinnelige asynkrone mønsteret i JavaScript – de kom før Promises.

// Synchronous callback:
[1, 2, 3].forEach(function(n) {
  console.log(n);
});

// Async callback:
setTimeout(function() {
  console.log('1 second later');
}, 1000);

Node.js-callbacker med feil først

Node.js standardiserte en konvensjon der callbacker mottar en feil som første argument og resultatet som andre. Hvis err er null/undefined, var operasjonen vellykket.

fs.readFile('data.json', 'utf8', function(err, data) {
  if (err) {
    console.error('Failed to read file:', err);
    return;
  }
  console.log('File contents:', data);
});

Asynkrone trinn med callbacker

Når én asynkron operasjon avhenger av resultatet fra en annen, nøstes callbackene. Allerede tre sekvensielle trinn begynner å se uoversiktlige ut.

getUser(userId, function(err, user) {
  if (err) return handleError(err);
  getOrders(user.id, function(err, orders) {
    if (err) return handleError(err);
    getInvoice(orders[0].id, function(err, invoice) {
      if (err) return handleError(err);
      // Finally use invoice
      renderInvoice(invoice);
    });
  });
});

Callback-helvete – undergangspyramiden

Dyp nøsting kalles callback-helvete eller undergangspyramiden. Problemene er at koden forskyves mot høyre for hvert nivå, feilhåndteringen gjentas, flyten er vanskelig å følge, og refaktorering blir smertefull.

Problemene med callback-helvete

1) Feilhåndtering krever en eksplisitt if(err) på hvert nivå. 2) Feilsøking er vanskelig – stakkspor viser ikke den logiske kjeden. 3) Koden er vanskelig å lese når den er organisert i horisontale lag. 4) Det er lett å overse feil.

Tiltak: navngitte funksjoner

Trekk nøstede callbacker ut i navngitte funksjoner på toppnivå. Dette flater ut nøstingen og gjør hvert trinn mulig å teste isolert – men løser ikke det grunnleggende koordineringsproblemet.

function onInvoice(err, invoice) {
  if (err) return handleError(err);
  renderInvoice(invoice);
}
function onOrders(err, orders) {
  if (err) return handleError(err);
  getInvoice(orders[0].id, onInvoice);
}
function onUser(err, user) {
  if (err) return handleError(err);
  getOrders(user.id, onOrders);
}
getUser(userId, onUser);

Biblioteker for kontrollflyt (historisk)

Biblioteker som async.js tilbød hjelpefunksjoner (async.waterfall, async.parallel) for å håndtere callback-baserte flyter. De var den ledende løsningen før Promises kom i ES2015.

Hvorfor callbacker ikke forsvinner

Callbacker finnes fortsatt overalt: hendelseslyttere, array-metoder, setTimeout og strøm-API-er bruker alle callbacker. Nøkkelen er at Promises og async/await er bedre for asynkron sekvensering. Callbacker for enkle enkelthendelser er fortsatt et godt valg.

Fra callback til Promise: Promisify

Node.js sin util.promisify() pakker callback-funksjoner med feil først inn i versjoner som returnerer Promises. Dette bygger bro mellom eldre API-er og moderne async/await-kode.

const { promisify } = require('util');
const readFile = promisify(require('fs').readFile);

async function readConfig() {
  const data = await readFile('config.json', 'utf8');
  return JSON.parse(data);
}

Når callbacker fortsatt er det riktige verktøyet

Hendelseslyttere (addEventListener) forventer callbacker, og det er helt greit – de utløses flere ganger. Håndterere for strømdata forventer også callbacker. Promises representerer asynkrone resultater som oppstår én gang; callbacker er abonnementer på flere hendelser.

Veien videre: Promises og async/await

Promises, som ble introdusert i ES2015, og async/await, som kom i ES2017, løste problemet med callback-helvete. Moderne JavaScript-kode bruker nesten alltid async/await for sekvensielle asynkrone operasjoner. Det er fortsatt viktig å forstå callbacker for å kunne lese eldre kode og bibliotekenes interne implementasjoner.

Kort sjekk

Hva er hovedproblemet som callback-helvete beskriver?

Besvar den i den interaktive leksjonen

Oppsummering: Callbacker

Callbacker er funksjoner som sendes til andre funksjoner for å kalles senere. De er det opprinnelige asynkrone mønsteret. Callbacker med feil først (err, result) er en Node.js-konvensjon. Dyp nøsting skaper callback-helvete. Trekk ut navngitte funksjoner for å flate ut nøstingen. Bruk Promises/async/await for sekvensielle asynkrone flyter. Callbacker passer fortsatt for hendelseslyttere og strømmer.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Callbacks og callback hell» gratis?

Ja – hele teksten i «Callbacks og callback hell» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Callbacks og callback hell»?

Forstå asynkron kode basert på callbacks, identifiser nøstingsproblemet som kalles callback hell, og se hvorfor Promises ble introdusert for å løse det. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Callbacks og callback hell»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Event loop: call stack, kø og mikrotasks
Callbacks og callback hell
Promises: then, catch, finally og Promise.all
async/await og feilhåndtering

← Tilbake til Frontend Academy