Utilizing Typescript for Promises and leveraging Async-Await for dependent calls

Question

Utilizing Typescript for Promises and leveraging Async-Await for dependent calls

I am currently exploring ways to enhance the performance of data loading by running requests in parallel or considering alternative methods. My background is in Java and I am relatively new to coding in Javascript/Typescript. I recently came across Async-Await and Promises which caught my interest.

Within my code, I have two methods - one that is independent and processes a single request, and another that relies on the output value of other requests (specifically the "number" value).

The sequence in which I call these functions is as follows:

private run(): void {
    this.populatePostTextData(list, 3);
    this.populateCustomerNameData(list, 5);
}

Here are my concerns:

Both methods do not appear to be executing in parallel simultaneously. The flow seems to wait for populatePostTextData() to complete (and update the DOM), then proceed to populateCustomerNameData() (updating the DOM again).

The second method involves two requests and I'm unsure how to structure the await. I attempted to chain them together like so:

await Service.Current.executeRequest(getNumber).then((response: Response) => {
    number = response.items[0]["CustomerNumber"];
    console.log("Customer No retrieved: " + number);
    await Service.Current.executeRequest(getNumber)... 
}).catch((response: Response) => {
    console.log("Error: " + response.errorMessage);
});

However, I encountered an error with

await Service.Current.executeRequest(getNumber)...

indicating it must be within an async function due to nesting. It doesn't seem to recognize it as part of an async method.

First Method

    async populatePostTextData(list: IList, columnNum: number) {
        const columnId = "C" + columnNum;
        for (let i = 0; i < list.getData().getLength(); i++) {
            let referenceOrderNo = list.getData().getItem(i).C1;
            let referenceOrderLine = list.getData().getItem(i).C2;

            const request = new Request("...");
            let postTextData = {};
            await Service.Current.executeRequest(request).then((response: Response) => {
                let postText = response.items[0]["PostText"];
                postTextData[columnId] = postText;
                postTextData["id_" + columnId] = "R" + (i + 1) + columnId;
                $.extend(list.getData().getItem(i), postTextData);
            }).catch((response: Response) => {
                console.log("Error: " + response.errorMessage);
            });
        }
    }

Second Method getNumber should execute first as variable number is utilized in getName

    async populateCustomerNameData(list: IList, columnNum: number) {
        const columnId = "C" + columnNum;

        for (let i = 0; i < list.getData().getLength(); i++) {
            let referenceOrderNo = list.getData().getItem(i).C1;
            let referenceOrderLine = list.getData().getItem(i).C2;

            let number = "";
            const getNumber = new Request(".../");
            await Service.Current.executeRequest(getNumber).then((response: Response) => {
                number = response.items[0]["CustomerNumber"];
                console.log("Customer No retrieved: " + number);
            }).catch((response: Response) => {
                console.log("Error: " + response.errorMessage);
            });

            let customerName = {};
            const getName = new Request("...");
            getName.setParam(1,number);
            await Service.Current.executeRequest(getName).then((response: Response) => {
                const name = response.items[0]["CustomerName"];
                customerName[columnId] = name;
                customerName["id_" + columnId] = "R" + (i + 1) + columnId;
                $.extend(list.getData().getItem(i), customerName);
            }).catch((response: Response) => {
                console.log("Error: " + response.errorMessage);
            });
        }
    }

I would greatly appreciate any suggestions or solutions.

Thank you.

javascript typescript asynchronous es6-promise

Answer 1

Answer №1

It seems like the second request is dependent on the first one being resolved, as you need to pass in the number. In that case, you can try something like this:

const processor = async() => {
    try {
    const result = await initialRequest();
    // At this stage, you can assume that the first request has been successfully completed and you can extract necessary information from the response.
    const number = result.number 
    await subsequentRequest(number);
    } catch(error) {
        console.log(error):
    }
}

Then you can call processor or any other name you prefer whenever you want to start this process. Both request functions should return promises, or they should be async functions which automatically return promises.

You can also utilize the .then keyword or the await keyword to organize the flow of your asynchronous parts within your program. It's possible to use both, but typically one would suffice. If you opt for .then, it could be implemented like this:

const processor = () => {
    initialRequest()
      .then((response) => response.number))
     .then((num) => subsequentRequest(num))
     .catch((error) => console.log(error)):
}

Await is the newer syntax and is generally recommended as it enhances code readability significantly.

Cheers

Answer 2

It seems like the second request is dependent on the first one being resolved, as you need to pass in the number. In that case, you can try something like this:

const processor = async() => {
    try {
    const result = await initialRequest();
    // At this stage, you can assume that the first request has been successfully completed and you can extract necessary information from the response.
    const number = result.number 
    await subsequentRequest(number);
    } catch(error) {
        console.log(error):
    }
}

Then you can call processor or any other name you prefer whenever you want to start this process. Both request functions should return promises, or they should be async functions which automatically return promises.

You can also utilize the .then keyword or the await keyword to organize the flow of your asynchronous parts within your program. It's possible to use both, but typically one would suffice. If you opt for .then, it could be implemented like this:

const processor = () => {
    initialRequest()
      .then((response) => response.number))
     .then((num) => subsequentRequest(num))
     .catch((error) => console.log(error)):
}

Await is the newer syntax and is generally recommended as it enhances code readability significantly.

Cheers

Answer 3

Answer №2

There doesn't seem to be any obstruction for the second function to run, but it appears that your requests are getting hindered by the await within their respective for loops. You might want to consider using Promise.all or eliminating await for calls you wish to execute concurrently.

This code snippet serves as a demonstration to illustrate the key concepts essential for grasping almost everything about Promises and Async/Await.

let hrstart = process.hrtime();

function time() {
    return `${process.hrtime(hrstart)[0]}s`;
}

function wait(time) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(time);
        }, time * 1000);
    });
}

async function blocking() {
    for (let index = 5; index < 10; index++) {
        let complete = await wait(index);
        console.log('blocking', complete, time());
    }
}

async function single() {
    let complete = await wait(2);
    console.log('single:', complete, time());
}

async function nonBlocking() {
    let jobs = [];
    for (let index = 5; index < 10; index++) {
        jobs.push(wait(index));
    }
    return Promise.all(jobs).then((res) => {
        for (let index = 0; index < res.length; index++) {
            console.log('non-blocking:', res[index], time());
        }
    });
}

blocking();
single();
nonBlocking();

The output produced is as follows:

single: 2 2s
blocking 5 5s
non-blocking: 5 9s
non-blocking: 6 9s
non-blocking: 7 9s
non-blocking: 8 9s
non-blocking: 9 9s
blocking 6 11s
blocking 7 18s
blocking 8 26s
blocking 9 35s

Answer 4

There doesn't seem to be any obstruction for the second function to run, but it appears that your requests are getting hindered by the await within their respective for loops. You might want to consider using Promise.all or eliminating await for calls you wish to execute concurrently.

This code snippet serves as a demonstration to illustrate the key concepts essential for grasping almost everything about Promises and Async/Await.

let hrstart = process.hrtime();

function time() {
    return `${process.hrtime(hrstart)[0]}s`;
}

function wait(time) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(time);
        }, time * 1000);
    });
}

async function blocking() {
    for (let index = 5; index < 10; index++) {
        let complete = await wait(index);
        console.log('blocking', complete, time());
    }
}

async function single() {
    let complete = await wait(2);
    console.log('single:', complete, time());
}

async function nonBlocking() {
    let jobs = [];
    for (let index = 5; index < 10; index++) {
        jobs.push(wait(index));
    }
    return Promise.all(jobs).then((res) => {
        for (let index = 0; index < res.length; index++) {
            console.log('non-blocking:', res[index], time());
        }
    });
}

blocking();
single();
nonBlocking();

The output produced is as follows:

single: 2 2s
blocking 5 5s
non-blocking: 5 9s
non-blocking: 6 9s
non-blocking: 7 9s
non-blocking: 8 9s
non-blocking: 9 9s
blocking 6 11s
blocking 7 18s
blocking 8 26s
blocking 9 35s

Utilizing Typescript for Promises and leveraging Async-Await for dependent calls

Answer №1

Answer №2

Similar questions

Why does the parent URL become the origin for an AJAX request coming from an iframe?

Guide on uploading multiple images in react using Next.js

Replace all occurrences of `<span>` with an empty string in a JavaScript string

"Bringing back the page zoom/scale with the click of a button

Detecting changes in URL hash using JavaScript - the ultimate guide

What is the best method to eliminate a "0" entry from a javascript event array?

Each time I invoke the setInterval function, my counter speeds up - using vuejs

Error in Angular $injector: Unknown provider

Implementing background color changes based on a database value (sex) using JavaScript

Retrieve the `access_token` attribute from local storage

Ways to incorporate customizable text and images into three.js

Double-click to toggle with jQuery

What is the best way to retrieve the identifier for a specific role?

HTML modal windows are a great way to show

Data shared among various RXJS Observables

Implementing text assignment to a textbox field using React Redux

Adding days to a HijriDate: A step-by-step guide

Angular bar chart tooltip feature malfunctioning

Are there alternative methods for writing to a JSON file in Angular without relying on the fs module?

I'm looking to integrate Jest in my React project with npm. How can I achieve