Sync! ASynchronous !?

This happens to you when you get the data from API...

It should be return with data, but you got the "YOU DON'T HAVE DATA BIT**"
Let you know how to handle this kinda problems!

Let's get to basic here.

Legacy solution

• XMLHttpRequest()
• addEventListener("readystatechange", function())
• XMLHttpRequest().readyState, XMLHttpRequest().responseText, XMLHttpRequest().status, XMLHttpRequest().open("METHOD", resource), XMLHttpRequest().send()
• JSON.parse()

get API

const getTodos = (resource, callback) => {
  const request = new XMLHttpRequest();

  request.addEventListener("readystatechange", () => {
    if (request.readyState === 4 && request.status === 200) {
      //json convert to js object
      const data = JSON.parse(request.responseText); 
      callback(undefined, data);
    } else if (request.readyState === 4) {
      callback("could not fetch data", undefined);
    }
  });

  request.open("GET", resource);
  request.send();
};

This is legacy way to approach the async control.
Just read the code! It is no more than logic.

So if you want to async call the db one by one in order, how to hand that?

Callback Hell

getTodos("/todos/luigi.json", (err, data) => {
  // Error Handler
  if (err) {
    console.log(err);
  } else {
    console.log(data);
  }
  //Callback
  getTodos("/todos/mario.json", (err, data) => {
    console.log(data);
    getTodos("/todos/shaun.json", (err, data) => {
      console.log(data);
    });
  });
});

This is the way to control that!

nesting over and over and over and over again ...

it's not really fancy way to do that.

But here is better way come out called...

Promise callback!

• .then()
• .catch()

getTodos("todos/luigi.json")
  .then((data) => {
    console.log("promise 1 resolved:", data);
    return getTodos("todos/mario.json");
  })
  .then((data) => {
    console.log("promise 2 resolved:", data);
    return getTodos("todos/shaun.json");
  })
  .then((data) => {
    console.log("promise 3 resolved:", data);
  })
  .catch((err) => { //error handler
    console.log("promise rejected", err);
  });

Looks much easier to understand!
You can use .then() instead of callback nesting!
plus, use .catch() for error handler

fetch!

get API

• response.status
• response.json()

const getTodos = () => {
  const response = fetch(`todos/loigi.json`);
  const data = response.json();
  return data;
};

this is better way to approach to get the API
use .json() instead of .parse() for converting JSON to JS object

fetch("todos/luigi.json")
  .then((response) => {
    console.log("resolved", response);
    return response.json();
  })
  .then((result) => {
    console.log(result);
  })
  .catch((err) => { //error handler
    console.log("rejected", err);
  });

This is how to handle Async with .fetch()
First, it supposed to get response which should be parsed by .json() to be JS object.
Others are same to Promise.

Async, Await!

Last but not least, Async, Await came out!

const getTodos = async () => {
  const response = await fetch(`todos/loigi.json`);
  // custom error handler
  if (response.status !== 200) {
    throw new Error("cannot fetch the data");
  }
  const data = await response.json();
  return data;
};

if you use async infront of the function, stuff, which is following await, waits until finished.

But here is important part, even if data is undefined, still it goes resolved! so for error message you should use custom error handler for the console message!

getTodos("luigi")
  .then((result) => console.log("resolved:", result))
  .catch((err) => console.log("rejected:", err.message));

here we go! this is it!