Översikt

Asynkron programmering är centralt i modern webbutveckling med JavaScript. Denna vecka tittar du på vad det innebär och tillämpar det där det är som viktigast, vid nätverksanrop. Veckans tre artiklar går igenom hur webbläsaren och servern pratar med varandra, hur du väntar på något utan att låsa sidan och hur du hämtar och skickar data med fetch(). Information om veckans upplägg annonseras löpande i kursens Zulip-kanal.

2024-11-18 42:04

Vill du ändå se en gammal "Stå-upp"-vlogg med Mats & Mikael, inspelad under en tidigare kursomgång?

Veckans artiklar

Veckans teori finns samlad i tre artiklar. Läs dem i ordning; varje artikel bygger på den föregående.

1. HTTP och JSON – förfrågan och svar, metoder, statuskoder och headrar, och dataformatet JSON med JSON.parse() och JSON.stringify().

2. Promises och async/await – varför nätverksanrop måste vara asynkrona, ett promise och dess tre tillstånd, async och await, flera anrop samtidigt med Promise.all() och var felen ska tas om hand.

3. Nätverksanrop med fetch – att hämta och skicka data, kontrollera response.ok, ta hand om felmeddelanden som JSON, avbryta förfrågningar med AbortController och varför webbläsaren ibland stoppar en förfrågan med CORS.

Läsanvisningar

Under läsanvisningar hittar du veckans kapitel som ska läsas i kurslitteraturen. Planera upp och dela upp läsningen under veckan.

Övningar

Under Övningsuppgifter hittar du övningsuppgifter som det är lämpligt att du arbetar med under veckan.

Utmaningar

Under Utmaningar hittar du nio frågor om JSON, promises, fetch() och CORS, ett bra sätt att stämma av att du har förstått artiklarna.

Äldre inspelningar

Inspelningarna från 2021 tar upp samma stoff som artiklarna, men är delvis inaktuella. Bland annat används window.fetch() och svaren kontrolleras inte med response.ok. Artiklarna räcker, men vill du se genomgångarna i rörlig bild finns de kvar här. Sammanfattningar och presentationer till inspelningarna hittar du i samlingen av inspelningar för delkurs B.

2021-12-03 32:28

JSON: formatet, parse() och stringify(). Motsvarar andra halvan av artikeln HTTP och JSON.

2021-11-12 20:26

Kommunikation från webbläsaren: HTTP-metoder, statuskoder och Ajax. Motsvarar första halvan av artikeln HTTP och JSON.

2021-12-03 14:35

Asynkron programmering, introduktion: blockerande och icke-blockerande kod. Motsvarar början av artikeln Promises och async/await.

2021-12-03 41:54

Promises och async/await: formulär, fetch med och utan async/await och Promise.all(). Motsvarar artiklarna Promises och async/await och Nätverksanrop med fetch.

2021-11-12 4:51

CORS: varför förfrågningar till andra domäner stoppas och hur det löses. Motsvarar avsnittet om CORS i artikeln Nätverksanrop med fetch.

Handledning

Skicka gärna in frågor på förhand via formuläret som du når här:

• Frågor inför öppen handledning

Examinationsuppgift B2

Dags att påbörja kursens andra quiz-baserade examinationsuppgift B2.

Just nätverksanrop som du går igenom denna vecka är centralt i uppgiften!

Studiefrågor

Här är ett antal frågor som du kan försöka besvara och diskutera tillsammans med din AI-assistent. Tveka inte att lyfta någon av frågorna till handledningen för att fortsätta diskussionen med lärare och studiekamrater.

1. Vad består en HTTP-förfrågan och ett HTTP-svar av? Vad säger statuskoderna 201, 404 och 500?
2. Vilka datatyper har JSON, och vad händer med ett datum och en metod när ett objekt skrivs som JSON med JSON.stringify()?
3. Vad är ett promise, och vad betyder pending, fulfilled, rejected och settled? Varför körs funktionen i then() aldrig direkt, inte ens när promiset redan är fulfilled?
4. Vad pausar await, och vad pausar det inte? Varför är const books = getBooks() ett vanligt fel när getBooks() är en async-funktion?
5. Hur hämtar du tre resurser samtidigt i stället för en i taget, och vad händer om en av dem misslyckas?
6. När blir promiset från fetch() rejected, och när måste du själv kontrollera response.ok?
7. Varför kan ett äldre svar skriva över ett nyare, och hur förhindrar du det med AbortController?
8. Vad är en origin, och när skickar webbläsaren en preflight-förfrågan i CORS?

Tips

Här följer tips till hur du kan prioritera bland kursmaterialet för att komma igång med veckan.

1. Läs veckans tre artiklar i ordning. Inspelningarna är frivilliga.
2. Fräscha upp Händelseloopen från kursvecka 11 om du har glömt hur task queue och microtasks fungerar. Det gör promises lättare att förstå.
3. Gör övningsuppgiften Wikisök. Den tränar precis det den sista artikeln går igenom: fetch() mot ett riktigt API, ett svar som inte alltid ser ut som du väntar dig och förfrågningar som avbryts med AbortController.
4. Se till att komma igång med examinationsuppgiften B2. Öppna fliken Network och titta på svaren från API:et innan du skriver någon kod.