Preview:
asyncDemo.js
function fetchDataCallback(callback) {
  setTimeout(() => {
    callback("Data fetched using callback");
  }, 2000);
}

function displayDataCallback() {
  fetchDataCallback((data) => {
    console.log(data);
  });
}

function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched using promise");
    }, 2000);
  });
}

function displayDataPromise() {
  fetchDataPromise()
    .then((data) => console.log(data))
    .catch((error) => console.error("Error:", error));
}

async function fetchDataAsync() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched using async/await");
    }, 2000);
  });
}

async function displayDataAsync() {
  try {
    const data = await fetchDataAsync();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

console.log("Starting Callback example...");
displayDataCallback();

setTimeout(() => {
  console.log("\nStarting Promise example...");
  displayDataPromise();
}, 3000);

setTimeout(() => {
  console.log("\nStarting Async/Await example...");
  displayDataAsync();
}, 6000);
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter