There are three patterns for dealing with asynchronous operation in javaScript

• Callbacks

• Promises

• Async/await

Callbacks The callback is a function we call when the result of an asynchronous operation is ready.

Callbacks are a way to make sure certain code doesn’t execute until another code has already finished execution. example

console.log("Before the callback call");
getuserdata(1, function (user) {
  console.log("User", user);
});

console.log("After the call");

function getuserdata(id, callback) {
  setTimeout(() => {
    console.log("fetching user repos");
    callback({ id, githubProfile: "dandish" });
  }, 2000);
}

Result

Before the callback call
After the call
fetching user repos
User { id: 1, githubProfile: 'dandish' }

The callback is a function that is being executed after another function has finished executing.

Read More about Callback function here

Promises A promise is an object that holds the eventual results of asynchronous operations.

The promise object has two methods, then for collecting the resolved result and catch for collect the reject result of the asynchronous operations.

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1); // promise => resloved, fulfilled
  }, 2000);

  //reject(new Error('message))
});

p.then((result) => console.log("results", result))
  .catch((err) => {
    console.log("Error", err.message);
  })
  .then((err) => console.log("error", err.message));

In this example, we execute the function (p) after 2 seconds, it has the resolve and rejects. In the function call, we wait for the function to complete executing, once we receive a resolve in the callback we execute the then block .

If the Async operation of function P return a rejected promise, we execute the .catch block

If the promise completed successfully, we can that the promise is fulfilled, promise state move from pending at the initial state to resolved (fulfilled)

If the asynchronous operations fail, the state of promise move from pending to rejected,

Async/await

This is syntactic sugar, internally in javascript, a promise is used to execute it.

To get errors in async/await, we use the try and catch block, by putting all out await function in the try block, if anything goes wrong we catch the error in the catch block.

When we use await, we should start our function with the async modifier

Example

function getUser(id) {
  return new Promise((reslove, reject) => {
    setTimeout(() => {
      console.log("fetching user data");
      reslove({ id, username: "mubarak repos" });
      //reject(new Error("message"));
    }, 2000);
  });
}

function getRpository(username) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("fetching user repos");
      resolve(["instlike", "hmo_system", "arewastore"]);
      //reject(new Error("message"));
    }, 2000);
  });
}

async function dispalyRepos() {
  try {
    const user = await getUser(1);
    const repos = await getRpository(user.username);
    console.log(repos);
  } catch (err) {
    console.log("error", err.message);
  }
}

We have two functions, getUser(1), getRpository, then we implement the async/await function that calls the two functions one after another.

Both functions return a resolved promise, then our try block gives us the final result as seen below

fetching user data
fetching user repos
[ 'instlike', 'hmo_system', 'arewastore']

If one of the await function return reject promise, the catch block is executed with the reject error message, here is a result of reject promise in getRpository()

fetching user data
fetching user repos
error message

so, there you have it, please drop your comment below, and let continue the discussion around asynchronous operation in javaScript in the comment section below.