Asynkron programmering i JS

Computerspace · FGU · Programmering i JavaScript

⚡ Hvad er asynkron programmering i JavaScript?

JavaScript er single-threaded – det kan kun gøre én ting ad gangen. Asynkron programmering løser problemet med langsom I/O (netværk, filer) uden at blokere.

Event Loop – JavaScripts hemmelighed:

```

JavaScript har én tråd, men bruger Event Loop til at håndtere asynkron kode:

1. Synkron kode kører

2. Asynkrone callbacks placeres i kø

3. Når call stack er tom, kører callbacks fra køen

```

Callbacks – den gamle metode:

```javascript

// Callback – funktion der kaldes når noget er færdigt

setTimeout(() => {

console.log("2 sekunder gik");

}, 2000);

// Callback hell – svær at læse

hentBruger(id, (bruger) => {

hentOrdrer(bruger.id, (ordrer) => {

hentDetaljer(ordrer[0].id, (detaljer) => {

console.log(detaljer); // Dybt nestet!

});

});

});

```

Promises – den bedre metode:

```javascript

fetch("https://jsonplaceholder.typicode.com/posts/1")

.then(response => response.json()) // Konverter til JSON

.then(data => console.log(data)) // Brug data

.catch(error => console.error(error)) // Håndter fejl

.finally(() => console.log("Færdig")); // Kør altid til sidst

```

Async/await – den læsbare metode:

```javascript

async function hentPost(id) {

try {

const response = await fetch(https://jsonplaceholder.typicode.com/posts/${id});

if (!response.ok) {

throw new Error(HTTP fejl: ${response.status});

}

const data = await response.json();

return data;

} catch (error) {

console.error("Fejl:", error.message);

}

}

// Kald async funktionen

const post = await hentPost(1);

console.log(post.title);

```

Parallel asynkron kode:

```javascript

// Hent to ressourcer parallelt

const [post, bruger] = await Promise.all([

fetch("https://api.example.com/posts/1").then(r => r.json()),

fetch("https://api.example.com/users/1").then(r => r.json())

]);

```

---

🎓 Læringsmål for Asynkron programmering i JS

Læringsmål

• Forstå at JavaScript er single-threaded og hvad Event Loop gør
• Kende problemet med callback hell og hvorfor Promises løser det
• Bruge .then(), .catch() og .finally() til at håndtere Promises
• Skrive async/await kode til læsbar asynkron programmering
• Hente data fra en REST API med fetch() og parse JSON-svar

Sådan kan du arbejde med emnet

• Hvad er event loop i JavaScript?
• Hvad er et Promise og hvad er .then()?
• Hvad er forskellen på Promises og async/await?
• Hvad er fetch() og hvad returnerer det?

⚠️ Typiske fejl at undgå

• Glemmer await – uden await får du en Promise-objekt, ikke værdien
• Ingen fejlhåndtering – brug altid try/catch med async/await
• Seriel kode der kunne køre parallelt – brug Promise.all() til uafhængige kald

---

💡 Tips til at komme i gang

• Brug JSONPlaceholder – gratis fake REST API til at øve dig i fetch()
• Prøv Open Meteo API – gratis vejr-API der returnerer JSON
• Brug Promise.all() til at hente flere ressourcer parallelt