06 - React JS: async

Using async calls on your code

Introduction

• Class article

Prior to learning about async, read the following official documents:

• Synchronizing with Effects
• You Might Not Need an Effect

Some examples about async:

React async hook docs (unofficial docs): LINK

What are asynchronous functions?

Difference between synchronous vs asynchronous processes

• What is the difference between asynchronous and synchronous programming?

Synchronous and asynchronous are two types of programming models.

Understanding how these two models difffer is critical in building application programming interfaces (APIs), creating event-based architectures, and deciding how to handle long-running tasks.

Some quick facts: - Asynchronous programming is a multithreaded model that’s most applicable to networking and communications. Asynchronous is a non-blocking architecture, which means it doesn’t block further executions while one or more operations are in progress. - With asynchronous programming, multiple related operations can run concurrently without waiting for other tasks to complete. During asynchronous communication, parties receive and process messages when it’s convenient or possible, rather than responding immediately upon receipt. - Texting is an asynchronous communication method. One person can send a text message, and the recipient can respond at their leisure. In the meantime, the sender may do other things while waiting for a response. - - Synchronous processes are…

async example

Let’s analyse this example:

// Sync and blocking function
function resolveAfter2Seconds() {
    return new Promise(resolve => {
        setTimeout(() => {
            // Return a 'resolved' message
            resolve('resolved');
        }, 2000);
    });
}

// Async and non-blocking function
async function asyncCall() {
    console.log('Async function started');
    // Call the sync function with the 'await'
    const result = await resolveAfter2Seconds();
    // After 2 seconds, the next log shall be executed
    console.log('Sync function called with an await')
    console.log(result);
    // Expected output: "resolved"
}

// Call the async function
asyncCall();
// Write something to the logs
console.log("Message after the async function call...");

The async functions don’t block the execution of the next lines of codes, that’s why the last console.log call appears in the output before asyncCall ends.

What does await do?

What is the Promise object?

• Mozilla docs
• Using promises

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

Structure

We can create a service folder in our project that holds our API functions (CRUD)