Asynchronous Javascript - Old Function Callbacks, Promises, Promise Chaining, Promise Chaining with Returned Promises, Async/Await Functions.

async-func-callback.js

// Asynchronous Function Callback

function loadAsset(url, cb) {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", url);

  xhr.addEventListener("readystatechange", () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      cb(undefined, JSON.parse(xhr.responseText));
    } else if (xhr.readyState === 4) {
      cb("error getting resource", undefined);
    }
  });

  xhr.send();

  //   console.log(xhr);
}

// Asynchronous Callback Function
loadAsset("./Data.json", (err, data) => {
  if (err) {
    console.log(err);
  } else if (data) {
    console.log(data);
  }

  loadAsset("./Data2.json", (err, data) => {
    if (err) {
      console.log(err);
    } else if (data) {
      console.log(data);
    }

    loadAsset("./Data3.json", (err, data) => {
      if (err) {
        console.log(err);
      } else if (data) {
        console.log(data);
      }
    });
  });
});

promise-callback-chained-improved.js

function loadAsset(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);

    xhr.addEventListener("readystatechange", () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(xhr.responseText);
      } else if (xhr.readyState === 4) {
        reject("error getting resource");
      }
    });
    xhr.send();
  });
}

// Promise Callback Functions - Improved
loadAsset("./Data.json")
  .then((data) => {
    console.log(JSON.parse(data));
    return loadAsset("./Data2.json");
  })
  .then((data2) => {
    console.log(JSON.parse(data2));
    return loadAsset("./Data3.json");
  })
  .then((data3) => {
    console.log(JSON.parse(data3));
  })
  .catch((err) => {
    console.log(err);
  });

promise-callback-chained.js

function loadAsset(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);

    xhr.addEventListener("readystatechange", () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(xhr.responseText);
      } else if (xhr.readyState === 4) {
        reject("error getting resource");
      }
    });
    xhr.send();
  });
}

// Promise Callback Functions - Improved
loadAsset("./Data.json")
  .then((data) => {
    console.log(JSON.parse(data));
  })
  .then(() => {
    loadAsset("./Data2.json").then((data2) => {
      console.log(JSON.parse(data2));
    });
  })
  .then(() => {
    loadAsset("./Data3.json").then((data3) => {
      console.log(JSON.parse(data3));
    });
  })
  .catch((err) => {
    console.log(err);
  });

promise-callback.js

function loadAsset(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);

    xhr.addEventListener("readystatechange", () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(xhr.responseText);
      } else if (xhr.readyState === 4) {
        reject("error getting resource");
      }
    });
    xhr.send();
  });
}

// Promise Callback Functions
loadAsset("./Data.json")
  .then((data) => {
    console.log(JSON.parse(data));
  })
  .catch((err) => {
    console.log(err);
  });

promises-callback-async-await.js

function loadAsset(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.addEventListener("readystatechange", () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(xhr.responseText);
      } else if (xhr.readyState === 4) {
        reject("error getting resource");
      }
    });

    xhr.send();
  });
}

// Promise Callback - Async & Await
function makeRequest(url) {
  return loadAsset(url);
}

try {
  let data1 = await makeRequest("./Data.json");
  console.log(JSON.parse(data1));

  let data2 = await makeRequest("./Data2.json");
  console.log(JSON.parse(data2));

  let data3 = await makeRequest("./Data3.json");
  console.log(JSON.parse(data3));
} catch (err) {
  console.log(err);
}

simple-promise.js

// Simple Promise

function doSomething() {
  return new Promise((resolve, reject) => {
    if (2 > 1) {
      resolve("from the promise");
    } else {
      reject("rejected promise");
    }
  });
}

doSomething()
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });