week 4: gastles danny

Gastles van Danny de Vries

Vandaag kregen we een gastles van van Danny, ik vond hem zelf heel interessant omdat we tijdens de opleiding het hier nog niet veel hebben over gehad, namelijk Synchroon of Asynchroon coderen. Dit zijn 2 methodes die zorgen voor het inladen van jouw javascript.

Synchroon coderen:

Synchroon coderen betekent dat er pas een proces start wanneer de vorige is afgelopen. Hierdoor duurt het vaak langer voordat bijvoorbeeld functies in JS geladen worden. Dit kan ervoor zorgen dat websites op de eerste ogenblik er wat vreemd uit kan zien of dat het gewenste resultaat niet overkomt bij de gebruiker. Dat kan dus al snel leiden dat mensen je website verlaten en dat wil je natuurlijk niet. Hieronder zie je een afbeelding van het proces van synchroon coderen:

Asynchroon coderen:

Deze methode zorgt ervoor dat je NIET hoeft te wachten totdat een proces wordt gestart (zie afbeelding). Met Asynchroon coderen zorg je er namelijk voor dat functies tijdens elkaar al kunnen laden, wat heel handig kan zijn als je een "Fetch" doet naar een API. Deze API's zijn vaak grootte bestanden en kunnen lang duren voordat ze geladen worden. In de tussentijd laden andere functies wel.

Binnen Asynchroon coderen zijn er verschillende manieren waarop je het proces van start kunt laten gaan:

• Met callbacks
• Met Promises
• Met Async/Await

De Callbacks

Het gebruik maken van "Callbacks" is een wat ouderen manier die niet perse meer veel wordt gebruikt. Ze worden in samenhang met "argumenten" gebruikt om vervolgens de code te laten werken. Een callback function is dus als het ware een functie waarbij een argument wordt doorgegeven binnen een andere functie die wordt geladen nadat een andere fucntie klaar is. Hieronder ene voorbeeld:

// Example function with a callback
function fetchData(url, callback) {
  // Simulating an asynchronous operation (e.g., fetching data from a server)
  setTimeout(() => {
    const data = "Some data from the server";
    // Once the operation is complete, call the callback function
    callback(data);
  }, 2000); // Simulating a 2-second delay
}

// Callback function to handle the fetched data
function handleData(data) {
  console.log("Data received:", data);
}

// Calling the function with the callback
fetchData("https://api.example.com/data", handleData);

console.log("This message is logged before the data is received because fetchData is asynchronous.");

Zoals je kunt zien is dit veel code en kan het erg uit de hand lopen. dan spreekt men over een "Callback Hell". Die zie je hieronder:

fetchData(function(data) {
  processData(data, function(result) {
    displayResult(result, function() {
      // More nested callbacks...
    });
  });
});

Dit word zo een erge "Hell" dat het ook niet meer begrijpbaar te lezen valt. Gelukkig kan error handeling heir wat mee helpen om fouten op te sporen. Dat doe je door middel van een If/Else statement:

fetchData("https://api.example.com/data", function(error, data) {
  if (error) {
    console.error("Error:", error);
  } else {
    console.log("Data received:", data);
  }
});

De Promises

Het schrijven van een "Promise" is eigenlijk een gestructureerdere en leesbaarder manier van de callback. Hierbij Kan de "Promise" met 2 argumenten zeggen of het is gelukt of niet. zie voorbeeld:

const myPromise = new Promise((resolve, reject) => {
  // Asynchronous operation
  // If successful, call resolve(value)
  // If an error occurs, call reject(reason)
});

Je kunt ook een "Promise chain" maken. hierbij gebruik je ".then()" voor de succesfull cases en ".catch()" voor de error afhandeling

myPromise
  .then(result => {
    console.log("Operation successful:", result);
    return anotherPromise;
  })
  .then(nextResult => {
    console.log("Another operation successful:", nextResult);
  })
  .catch(error => {
    console.error("Error:", error);
  });

De Async/Await

Dit is eigenlijk de nieuwste methode om te werken met Asynchroon coderen. In feiten moet dit een simpelere manier zijn om Asynchroon code te schrijven, Maar ik vind zelf dat dit nog wat tegenvalt omdat ik meer gewend ben om met promises te schrijven. Hieronder zie je een voorbeeld:

async function fetchDataAsync() {
  try {
    const result = await fetchData("https://api.example.com/data");
    console.log("Operation successful:", result);
  } catch (error) {
    console.error("Error:", error);
  }
}

Wat je hierboven dus ziet is dat er door middel van een "Asyc" function de data wordt geladen met een "Await" en om ervoor te zorgen dat wanneer er een fout voorkomt, gebruik je de "try & Catch" methode. Het schrijft dus wel een stukje korter als een Promise maar zo heeft iedereen zijn voorkeuren.