JavaScript: How to wait for completion of async api call

Question

I have an async function:

 const _getSelectedComponentVariantByComponentName = async (name) => {
            const response = await api.get(`/internal/api/Component/GetComponentVariantByComponentName/${name}`);

            componentRow.component = response.data;
            return componentRow;
        };

And I'm trying to use this function inside .map() method:

let componentRows = [...getState().formulaBuilder.componentRows];
componentRows = componentRows.map(async row => {
                row  = await _getSelectedComponentVariantByComponentName(row.name);
                return row;
            });

But in this case I got a Promise with status "pending". How to wait for completion of async api call and return a value;

Do you really want to await each item consistently? Looks like a perfect use case for Promise.all — P.S.
– P.S., Commented May 26, 2020 at 9:23
Does this answer your question? Best way to call an async function within map? — guyaloni
– guyaloni, Commented May 26, 2020 at 9:26

Shubham Khatri · Accepted Answer · 2020-05-26 09:31:56Z

2

You can make use of Promise.all with map and use await with it.

map will return an array of Promises, Promise.all will wait for all promises to resolve and then resolve with the values as an array for each promise.

Also make sure you execute the below code in an async function:

 let componentRows = [...getState().formulaBuilder.componentRows];
  componentRows = await Promise.all(componentRows.map(row => {
            return _getSelectedComponentVariantByComponentName(row.name);
        }));

edited May 26, 2020 at 9:31

answered May 26, 2020 at 9:24

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mahmoudafer Over a year ago

good answer but i think it needs a little more info: async functions always return a promise, and the map function returns an array of whatever is returned from the callback inside, which is a promise, so in js we can wait for all promises to resolve in an array by using Promise.all

Collectives™ on Stack Overflow

JavaScript: How to wait for completion of async api call

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related