Asynchronous JavaScript | JavaScript Tutorial #62 min read

In the Previous Tutorial, We Learned About JSON And API Calls In JavaScript, And In this Tutorial, If You Missed It You Can Access It Here: JSON and API calls In JavaScript We Will Be Learning With Asynchronous In JavaScript.

What is Asynchronous?

Asynchronous programming is used in JavaScript to handle scenarios where code needs to be executed outside the normal program flow. This is useful when making network requests, reading/writing files, and interacting with databases.

There are several ways to handle asynchronous code in JavaScript, but the two most common ways are with promises and the `async/await` syntax.

What are Promises In JavaScript?

A promise is an object that represents the result of an asynchronous operation. A promise can have one of three states: pending, fulfilled, or rejected. Promises can be created using the `Promise` constructor.

How to Create Promise in Javascript?

An Example of a Promise In JavaScript:

const myPromise = new Promise((resolve, reject) => {
// do something asynchronous
if (/* everything turned out fine */) {
resolve(“Success!”);
} else {
reject(“Error!”);
}
});

You can use the `then` method of a Promise to specify what should happen when the Promise is fulfilled, and the `catch` method to specify what should happen when the Promise is rejected.

myPromise.then((result) => {
console.log(result); // “Success!”
}).catch((error) => {
console.log(error); // “Error!”
});

What is Async/Await In JavaScript?

The `async`/`await` syntax is a way to make working with Promises easier and more readable. You can use the `async` keyword to declare an asynchronous function, and then use the `await` keyword inside the function to wait for a Promise to be fulfilled.

Here’s an example of how you might use `async`/`await` to make a network request:

async function getData() {
try {
const response = await fetch(‘https://my-api.com/endpoint’);
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}

`async`/`await` can make your asynchronous code look and behave more like synchronous code, which can make it easier to understand and work with.