JavaScript Asynchronous Programming Concepts

Synchronous Program Flow

• Programs execute code sequentially, line by line.
• The program waits for each statement to finish before running the next.
• If a statement takes a long time (like loading a file), the program is blocked.
• This can be inefficient.

Asynchronous Program Flow

• Programs don't wait for each statement to finish.
• They can continue with other tasks while waiting for a statement to complete.
• Uses callbacks (functions called when something happens).
• The program continues running while file loading, and then executes the callback function when the file is loaded.
• More efficient than synchronous flow, especially for tasks that involve waiting.

Implementing Asynchronous Flows in JavaScript

• JavaScript uses the event system to handle asynchronous tasks.
• Other methods include using simple callbacks, promises, and async/await.
• The event system works by registering event handlers, which don't immediately block the program. The program can continue other operations until the event occurs.

The Event System

• JavaScript's event system is asynchronous.
• An event handler isn't executed immediately but when the event is triggered.
• Example: myButton.addEventListener("click", startMovie); registers an event handler for a click.

Dispatching Events

• Custom events can be dispatched.
• Code must create the event object.
• Event handlers are triggered by dispatching the event.

var myEvent = new Event("armageddon");
myEvent.someData = "don't panic!";
myList.dispatchEvent(myEvent);
myList.addEventListener("armageddon", endOfWorld);

Simple Callbacks

• Another method for asynchronous flow is using simple callbacks.
• Example: setTimeout(timeout, 5000); runs timeout() after 5 seconds.
• Anonymous functions can be used in the call, e.g., setTimeout(function(){ /*...*/}, 5000);

Promises

• Promises provide a more robust way to handle asynchronous operations.
• A promise is an object representing a value's eventual completion or failure.
• Promises can resolve or reject.
• There are states for a promise: pending, resolved, and rejected.
• The then method handles the promise's resolution or rejection.
• Example:

var msgPromise = sayHello();
msgPromise.then(success, fail);

Handling Errors with catch

• A catch block can be used to handle errors in a chain of asynchronous operations that are not handled by a then callback.

Using Async/Await

• async/await functions can be used to make asynchronous code more readable.
• async syntax converts the code to use await and synchronously handle promises.
• await pauses execution until a promise is fulfilled or rejected.
• Error handling with try-catch is important.

async function loadMsg() {
try {
    let promise1 = await sayHello();
    let promise2 = await promise1.sayCurse();
    let promise3 = await promise2.sayGrunt();
    console.log(promise1, promise2, promise3);
}
catch(err) {
    console.log(err);
}
}
loadMsg();