Introduction to Asynchronous Javascript

Introduction to Asynchronous Javascript

Asynchronous JavaScript the best described as being able to multitask while running one program and working on another program. In the other words, asynchronous coding allows you to work on other tasks while that code is running if your program is running a particularly long task.

Synchronous Code

JavaScript is a very fast language, but some actions require time, no matter how little. In this case, for example, of a request to a database that may take some time or even a complex mathematical calculation, synchronous code execution will at least block the rest of the code or break it.

IF you want then buy a good, reliable, secure web hosting service  from here: click here

Now, give the example below of synchronous code

const showGreeting = <span class="hljs-function"><span class="hljs-params">(content)</span> =></span> {
 <span class="hljs-built_in">console</span>.log(content);
}

const runMeFirst = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
showGreeting(<span class="hljs-string">"Hello"</span>);
}

const runMeNext = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
showGreeting(<span class="hljs-string">"World!"</span>);
}

runMeFirst();
runMeNext();

Asynchronous Execution

So, there are three ways to run code asynchronously like below:

• Callback functions
• Promises (ES6)
• Async/Await (ES8)

Callback Functions

Firstly, Callbacks are the original way JavaScript used to run code asynchronously. It basically is a function that is passed as a parameter to another function. Callbacks are executed when the previous one has finished.

You can purchase your hosting from Cloudsurph.com, Cloudsurph hosting is a reliable hosting option for business and personal projects. We offer insight and help on system configuration issues and code errors or bugs.

For our code above, this is an implementation of asynchronously running the code above check the below code:

const showGreeting = (content) => {
console.log(content);
};

const runMeFirst = (callback) => {
setTimeout(() => {
showGreeting('Hello');
callback();
}, 1000);
};

const runMeNext = () => {
showGreeting('World!');
};

runMeFirst(runMeNext);

Promises

We can say, a promise is an object that represents the eventual completion or failure of an asynchronous operation. In other words, it is an object that represents an operation that has not been completed yet.

const runMeFirst = () => new Promise((resolve, reject) => {
setTimeout(() => {
showGreeting('Hello');

// Error handling would be needed here.
// For the sake of our example let's assume that the fetch request was successful.
const error = false;

if (!error) {
 // If there's no error we resolve the promise.
 resolve();
} else {
// If there's an error we reject it and handle the error.
reject(new Error('Something went wrong'));
  }
}, 1000);
});

Now let’s see below incorporate our new function into our code:

const showGreeting = (content) => {
 console.log(content);
};

const runMeFirst = () => new Promise((resolve, reject) => {
  setTimeout(() => {
    showGreeting('Hello');
    const error = false;

  if (!error) {
     resolve();
    } else {
    reject(new Error('Something went wrong'));
    }
  }, 1000);
});

const runMeNext = () => {
 showGreeting('World!');
};

runMeFirst()
  .then(runMeNext)
 .catch((err) => console.log(err)

Async/Await

Here, a newer way to handle asynchronous code was made available with the introduction of the async and await keywords in ES8 (or ES2017).

Finally, our previous example can then be rewritten as below:

const showGreeting = (content) => {
 console.log(content);
};

// The function returns a promise.
const runMeFirst = () =>
 new Promise((resolve, reject) => {
   setTimeout(() => {
      showGreeting('Hello');
      const error = false;

  if (!error) {
        resolve();
     } else {
       reject(new Error('Something went wrong'))
      }
   }, 1000);
  });

// The synchronous function.
const runMeNext = () => {
  showGreeting('World!');
};

// The new asynchronous function using async/await.
const init = async () => {
 await runMeFirst();
  runMeNext();
};

// Call the new asynchronous function.
init();

Conclusion

Lastly, we can say, that Asynchronous JavaScript unleashes the full power the language has to offer. Also, the Asynchronous relatively recent introduction of progressive ways to use it makes us be sure of the health and future of JavaScript.

That’s it. If you enjoyed reading this article and have more questions please reach out to our support team via live chat or email and we would be glad to help you. we provide server hosting for all types of need and we can even get your server up and running with the service of your choice.