sharepoint pnp calls returns undefined even before calls to SP finishes

Question

I am working in an spfx project and i need the user ids of the users from the SharePoint persona people picker of fabric ui. here is what i have so far.

component that calls the function:

    let userIds = await this.props.serviceCalls.getUserIds(this.state.Editors);
console.log(userIds, "user idsss");

and this is where i do the operations:

   public getUserIds(userInfo: any[]): Promise<any> {
    let promises = [];
    let resp;
    userInfo.forEach(u => {
        console.log(u.user.Description);
        return promises.push(sp.web.siteUsers.getByEmail(u.user.Description).get().then(res => {
            return res.Id;   
        }));
    });

    Promise.all(promises)
    .then(res => {
        console.log(res);
       resp = res;
    })
    .catch(err => { 
        resp = err
    });

    return resp;
}

why is it returning undefined even before the promise.all finishes? this is what is returning

Answer 1

It returns undefined because that's the return value of your function. If you want to return user ids (which is promise), you should return promise instead:

public getUserIds(userInfo: any[]): Promise<any> {
    let promises = [];
    userInfo.forEach(u => {
        console.log(u.user.Description);
        return promises.push(sp.web.siteUsers.getByEmail(u.user.Description).get().then(res => {
            return res.Id;   
        }));
    });

    return Promise.all(promises)
        .then(res => {
            console.log(res);
           return res;
        })
        .catch(err => { 
            throw err
        });
}