Asynchronous JavaScript

Sync vs. Async JavaScript

Du står i kö.

Din kompis bestämmer sig för att springa iväg
och köpa något att äta i kön.

Du behåller platsen i kön.

Kompisen kommer tillbaka med käket och höjer stämningen rejält.

Så funkar asynkront JavaScript

men...

Du vet inte om du kommer att stå kvar på samma plats i kön

Kön kanske plötsligt rör sig snabbt och du är inne

Kompisen kanske chansar ändå och springer iväg

I JavaScript chansar vi inte för då går det garanterat åt helvete

const button = document.getElementById('button');
const globalVariable;

button.addEventListener('click', function(){
  globalVariable = "Clicked!";
})
console.log(globalVariable);

Vad skrivs ut i console.log?

blocking code

Koden läses typ uppifrån och ner

//Can take forever
for(let i = 0; i < 100000000000000; i++){}

Har du en fet loop kommer den att blockera resterande kod

Vi kan garantera att kod körs som vi vill men vi får långsammare kod.

call stack

function foo(){
  return "Pffft!"; //remove from stack
}
function bar(){
  foo();
}

bar();

call stack

//Calls itself
function foo(){
  foo(); //Add to stack
}

foo();

non blocking code

AJAX & setTimout()

Funktioner eller kodblock som inte blockerar call stack

I princip placeras dessa funktioner i en annan stack som hanteras av event loop

//non blocking
console.log('Starting Sequence!');

setTimeout(function(){
  console.log('Hello from timeout!');
}, 250);

console.log('Ending Sequence!');

//non blocking
console.log('Starting Sequence!');

setTimeout(function(){
  console.log('Hello from timeout!');
}, 0); //No timeout, 0 milliseconds!

console.log('Ending Sequence!');

Event loopen kollar först om call stack är tom eller inte

setTimeout(function(){
  console.log('Hello from timeout!');
}, 0); //No timeout, 0 milliseconds!

Oberoende av tid som sätts så kommer koden att
först hanteras av event loop sedan läggas till i call stack

Alltid asynchronous

Philip Roberts: What the heck is the event loop anyway

https://www.youtube.com/watch?v=8aGhZQkoFbQ

Detta gäller setTimeout och setInterval

Samt alla anrop till en databas från JavaScript

Alla anrop till databaser via JavaScript sker via AJAX

Asynchronous JavaScript And XML

JSON

JSON

Subset of ECMAScript Objects

Kommer ifrån JavaScript

Standard sätt att skicka data I JavaScript

{
  "name": "Gurt Flurgur",
  "weapon": "Rusty knife",
  "hp": "10"
  "warCry": "function(){
    return 'ugh';
  }"
}

Allowed datatypes

• Number
• String
• Bool
• Array
• Object
• Whitespace
• Null

Unallowed datatypes

function()

undefined

DATA SOM DATA: Vi kan skicka med en function men vi ska inte

{
  "name": "Gurt Flurgur",
  "weapon": "Rusty knife",
  "hp": "10",
}

Läsbart för datorn

JSON är standarden för att skicka information på webben

I princip ett mer strukturerat och strikt objekt

Key / Value pair

Serialization

Processen att ta ett objekt och konvertera den till en sträng

Alla värden som skickas med måste vara i form av en sträng

Datorn ska kunna veta hur den ska konvertera tillbaka till ett objekt

I JavaScript: JSON.stringify()

Parsing

Även kallat de-serialization

När vi väl ska använda data från JSON

Konvertera tillbaka till ett objekt

I JavaScript: JSON.parse()

JSON-file

Filändelse: .json

JSON strukutureras på detta sätt för att data ska skickas

fetch()

fetch() allows you to make network requests similar to XMLHttpRequest. The main difference is that the Fetch API uses Promises, which enables a simpler and cleaner API, avoiding callback hell and having to remember the complex API of XMLHttpRequest.

The Promise object is used for asynchronous computations. A Promise represents a value which may be available now, or in the future, or never.

Wrappar vårt värde i ett Promise object

• pending: initial state, not fulfilled or rejected.
• fulfilled: meaning that the operation completed successfully.
• rejected: meaning that the operation failed.

fetch()

fetch returnerar ett promise object

fetch('exampleURL.com/doNotUseThis')
  .then(function(response) {
    return response.json();            
  })
  .then(function(json){
    console.log(json);
  })

"thenable" om vi ska använda värdet måste vi plocka värdet från objektet och göra om det från JSON till JavaScript

Error handling hanteras med .catch()

fetch('get.com')
  .then(function(response) {
    return response.json()
  })
  .then(function(actualData){
    console.log(actualData);
  })
  .catch(function(error) {
    console.log(error);
  });

Om .then() inte lyckas så går koden vidare till .catch()

Läs mer

https://www.tjvantoll.com/2015/09/13/fetch-and-errors/