JavaScript

Asynkron JS 

Syfte

  • Förstå vad som menas med asynkron programmering och hur det fungerar i Javascript
     
  • Använda async / await för att använda en asynkron funktion som fetch()

Syfte

 I slutändan ska du kunna bemästra de här två sätten fär asynkron hantering.

 


const getData = function(url) {
     fetch(url)
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.log(error));
}

getData(url);

Promise Chaining


const getData = function(url) {
     fetch(url)
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.log(error));
}

getData(url);

Promise Chaining


const getData = async function(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.log(error);
    }
}

getData(url);

Async / Await

Synkron programmering

Varje instruktion måste avslutas innan nästa instruktion kan köras.

Fler processer kan alltså inte köras samtidigt.

const arr = [1,3,4,5,6,7]
const anotherArr = [1,3,4]

for(let i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

console.log("For loop 1 done...")

for(let j = 0; j < anotherArrlength; j++) {
  console.log(anotherArr[j])
}

console.log("For loop 2 done...")

betyder "en sak i taget"

En del rutiner tar tid. Exempel HTTP-requests eller hämta från databas. Hur hantera vi detta?

Problemet

En kö av instruktioner

sånt som blockar!

Javascript är single-threaded, så vi kan inte lösa problemet med fler trådar/processer

Statement 1

Statement 2

Statement 3

Statement 4

HTTP REQUEST

🕰

HÄMTA FRÅN DB

🕰

BLOCKERANDE 👎

Problemet med synkront, där vissa processer tar tid och blockerar

När man bygger webbapplikationer som efterfrågar från API:er eller en databas blir det här problemet mer påtagligt. Ingen användare vill att ett fönster ska "frysas" medan text eller bild laddas in.

 

I synkron programmering så blockar programmet när det väntar på input från användaren, eller när programmet hämtar från API/databas eller input från användaren.

Kod som körs asynkront är något som kan påbörjas men kan avslutas senare utan att den blockerar annan kod under den tiden.
Man kan säga att den asynkrona processen ligger i "bakgrunden", tas "out of order" från annan synkron programmering.

För webbapplikationer handlar långa väntetider just om väntetid (inte beräkningstid) som hämta från API/databas. Här kommer alltså asynkron programmering i Javascript till sin stora nytta!

 

Asynkron programmering

motsats till synkron

Analogi

Koka pasta

Synkront

Asynkront

KLIENT

SERVER

HTTP

förfrågan

väntar på respons

KLIENT

SERVER

HTTP

förfrågan

Andra processer kan köras

HTTP svar

=> gör något med det

Asynkront!

Statement 1

Statement 2

Statement 3

CALLBACK

HTTP REQUEST

🕰

ICKE-BLOCKERANDE 👍 

HTTP REQUEST

Starta exekveringen nu, men avsluta senare

"BAKGRUNDEN"

Async / wait

async function getTodos() {

    try {
        // Väntar in tills datat har hämtats från todos.json
        const response = await fetch("https://jsonplaceholder.typicode.com/todos");

        // response.ok är att HTTP-status koden är 200 om hämtningen lyckas
        if(!response.ok) {
            throw new Error(`HTTP error status ${response.status}`);
        }

        // Väntar in till datat har parsats (översatts) till ett JS objekt
        const data = await response.json();

        // Logga ut datan
        console.log(data);

        // Visa alla todos i DOM:en
        displayTodos(data);
        

    } catch(error) {
        console.error("Type of error", error);
    }

}

Async / wait

function displayTodos(todos) {
  const ul = document.getElementById("data-list");
  todos.forEach(function(todo) {
    const li = document.createElement("li");
    li.textContent = todo.title;
    ul.appendChild(li);
  })

}


getTodos();

try & catch

  • try gör så att vi kan definiera en block som ska testas för fel/errors medan det exekveras
  • Med hjälp av catch så kan vi definiera en sektion av kod som ska utföras ifall det uppstår ett fel/error i try-blocket
  • try och catch kommer i par, det vill säga att vi kan inte bara använda den ena av dom, utan behöver initiera båda

Allmänt verktyg för felhantering