Section 1.1: Understanding Promises and Async/Await

To illustrate the distinction between async/await and promises, let’s consider a real-world analogy: Imagine parents eagerly waiting for their son to send them a text once he gets home from a party.

Their expectation is not to remain awake all night staring at their phones; they have faith that he will inform them when he arrives safely.

Promise: Think of it as the son assuring his parents that he will text them upon reaching home. The parents trust that he will fulfill his promise, although they are uncertain of the exact timing.

Async Function: This represents the parents' decision not to stay up all night glued to their phones; they trust their son to notify them upon his return.

Await: When the parents repeatedly check their phones, they are in a state of waiting for that text message. The concept of async/await allows processes to continue without being stalled while waiting for a specific event.

In programming terms, an Async Function signifies, "This might take some time, so I won’t halt everything else; other tasks can still proceed." Conversely, the Await keyword is always found inside an async function, indicating, "Pause here until this task concludes, then continue."

Section 1.2: Technical Definitions and Syntax

A Promise in JavaScript represents the anticipated completion (or failure) of an asynchronous task along with its resulting value. Promises can exist in one of three states:

• Pending: The initial state where the promise is neither fulfilled nor rejected.
• Fulfilled: Indicates that the operation completed successfully.
• Rejected: Indicates that the operation failed.

Here’s an example:

const myPromise = new Promise((resolve, reject) => {

setTimeout(() => {

resolve("data");

}, 300);

});

Async/Await allows developers to manage asynchronous tasks in a more synchronous manner, enhancing readability. An Async Function is declared with the async keyword, enabling non-blocking code execution.

Within an async function, the await keyword can be utilized to pause execution until a promise is either resolved or rejected. Here’s how it looks:

function myData() {

return new Promise((resolve) => {

setTimeout(() => {

resolve('data');

}, 2000);

});

}

async function fetchApi() {

console.log('calling');

const result = await myData();

console.log(result);

// Expected output: "data"

}

fetchApi();

The await operator allows you to pause for a promise to resolve and obtain its value. This operator can be used only within an async function or at the top level of a module.

Another Real-World Example with Fetch: A common practical application of async/await is in fetching data:

async function fetchData() {

const data = await response.json();

return data;

}

Happy coding, and stay tuned for more insights!