React async API call inside .map() function from actions

Question

I am new to React JS. In my application I am facing a situation where I need to call an API multiple times with different url, like apiurl.com/abc, apiurl.com/xyz. These abc and xyz are stored in an array. Hence I wanted to use .map() to change the url to make multiple api calls. But in .map() async await wont work, so looking for some solutions if any. I have gone through few possible solution like with promises, but could not implement.

Here is my code:

export const someAction = () => async (dispatch, param) => {
let myArray = ["abc", "xyz"];
let id= "";
param1 = "someauthcode";
myArray.map((x) => {
    id = x;
    const myResponse = await loaders.myResponseApi(param1, id); *//This does not work as await should be in async call*
});
dispatch({ type: types.ARRAY_API, payload: myResponse });

}

So the idea is to make 2 api calls with apiurl.com/abc, apiurl.com/xyz. I have constructed the url (apiurl.com) in an different file.

Thanks in advance.

You can use Promise.all . check this https://javascript.info/promise-api — Harmandeep Singh Kalsi, Jul 16 '20 at 17:09
Your map function is missing an `async` prefix. This code will fail. — Enijar, Jul 16 '20 at 17:10
As @HarmandeepSinghKalsi alluded to, `Array#map` does not support waiting for async events. You can however, return an array of Promises — Ruan Mendes, Jul 16 '20 at 17:10
What are you trying to with the API calls. Do you need to access the response within the map function? If not, Promise.all as suggested by @HarmandeepSinghKalsi will work. If you DO need to access the response, try adding async (x) to the beginning of your map function. — cmaronchick, Jul 16 '20 at 17:13
Are you wanting to wait for all the responses to return before dispatching anything, or do you want to dispatch as the responses come in? — EvanMorrison, Jul 16 '20 at 17:16
@EvanMorrison: No actually, when it performs .map(), that time I need those api urls to be called. — Saswata Sundar, Jul 16 '20 at 17:19

score 3 · Accepted Answer · answered Jul 16 '20 at 17:11

3

Turn your array into an array of promises and then use Promise.all

export const someAction = () => async(dispatch) => {


   try {
     const payload = await Promise.all(myArray.map(id => loaders.myResponseApi(param1,id)));
     dispatch({type:types.ARRAY_API,payload});
   } catch(err) {
     // an error occurred in at least one of the promises
   }

}

answered Jul 16 '20 at 17:11

Adam Jenkins

51,445
11
72
100

Awesome this works ! Thanks a lot for taking some time out for this. :) – Saswata Sundar Jul 16 '20 at 17:27

score 2 · Answer 2 · answered Jul 16 '20 at 17:20

2

Instead of using .map() you can use a traditional for or while loop:

export const someAction = () => async (dispatch, param) => {
    let myArray = ["abc", "xyz"];
    let id= "";
    param1 = "someauthcode";
    let i = 0;
    while (i < myArray.length) {
        id = myArray[i];
        const myResponse = await loaders.myResponseApi(param1, id);
        // handle response here...
        i++;
    }
}

answered Jul 16 '20 at 17:20

JusMalcolm

1,431
12
10

Will try this out. Thanks :) – Saswata Sundar Jul 16 '20 at 17:29

React async API call inside .map() function from actions

2 Answers2