Async function return before object with data built

Question

I'm not sure what's the best way to handle async / await here, it doesn't seem like my application is waiting before it calls render so it's trying to load before the data is ready.

data.js:

this.asyncFunction = async (x) => { return await _makeRestcall(x) }

this.load = async function(id) {
            this.data = {
                params: await asyncFunction("restCall1").value.reduce( // transform data),
                ideation: await asyncFunction("restCall2").value.reduce( // transform data),
                roles: await asyncFunction("restCall3").value.reduce( // transform data),
                serviceGroups: await asyncFunction("restCall4").value.reduce( // transform data),
                allocationPercents: [],
                maintenanceYears: [0, 3, 5]
            };

            return this.data;
        };

async init() {
    this.d = await this.load();
    console.log("called data async");
}

app.js

import data from 'data'
await data.init();
render()

Ideally I'd like all the calls in data to run in parallel then return this.data when all the calls are done.

`Promise.all` is your friend. – Daniel A. White May 01 '19 at 19:04 — Daniel A. White, May 01 '19 at 19:04

Simon Ifergan · Accepted Answer · 2019-05-01T20:36:16.973

I ran a little test for you. I would recommend going with Promise.all, it can dispatch two async functions, but wait for them at the same place without blocking the function after each dispatch.

See the code below:

getFromAPIA();
getFromAPIB();

// A
async function getFromAPIA() {
    console.log('starting A');
    try {
        const [a, b] = await Promise.all([asyncFunction(), asyncFunction()])

        let data = {
            a,
            b,
        }
        console.log('A RES:', data);
        return data;
    } catch (err) {
        return false; // Handle the error here in case the Promise returned a Reject
    }
}

// B
async function getFromAPIB() {
    console.log('starting B');
    try {
        let data = {
            a: await asyncFunction(),
            b: await asyncFunction(),
        }
        console.log('B RES:', data);
        return data;
    } catch (err) {
        return false; // Handle the error here in case the Promise returned a Reject
    }
}

// MIMIC ASYNC
function asyncFunction() {
    return new Promise((res, rej) => {
        setTimeout(() => {
            res('Hello');
        }, 10000)
    })
};

Method B is basically what you did, which took double the time to get a response, While Method A is with Promise.all. Now, promise all takes an array of promises as a parameter and also returns an array, so you will have to know the order of your dispatches in order to construct your object the way you want.

Would be nice if you could add an .then() and .catch() to the Promise.all(). Never let a Promise be uncatched and if he want to reuse your code i think it's better his errors would be caught. — Kai Lehmann, May 01 '19 at 19:42
I agree, promises should always be wrapped either in a try catch or handled with .then and .catch. I will edit it now. Thanks for pointing that out. — Simon Ifergan, May 01 '19 at 19:44

score -1 · Answer 2 · answered May 01 '19 at 19:35

it doesn't seem like my application is waiting before it calls render so it's trying to load before the data is ready.

you're waiting for the wrong object, you're waiting for Promise.value.reduce

this.asyncFunction = async (x) => { return await _makeRestcall(x) }

this.load = async function(id) {
    this.data = {
        params: (await asyncFunction("restCall1")).value.reduce( // transform data),
        ideation: (await asyncFunction("restCall2")).value.reduce( // transform data),
        roles: (await asyncFunction("restCall3")).value.reduce( // transform data),
        serviceGroups: (await asyncFunction("restCall4")).value.reduce( // transform data),
        allocationPercents: [],
        maintenanceYears: [0, 3, 5]
    };

    return this.data;
};

async init() {
    this.d = await this.load();
    console.log("called data async");
}

Async function return before object with data built

2 Answers2