JS, use of Async Await function in Axios when mapping over an array

Question

The function is intended to loop over an array and POST each value in the array to database. I got error if I use async await function.

Error : Can not use keyword 'await' outside an async function

 const myfunction = async () => {
    [1,2,3].map((item) => {
      
      const endpoint = "/api/";

      await apiService(endpoint, "POST", item)
        .then((r) => console.log(r))
        
    });
  };

The apiservice function use browser fetch function with stored cookie

This might be duplicate of following question Using async await when mapping over an arrays values, but I did not understand it.

Your apiService call is inside the map callback, which means you need to change that function to async: .map(async(item) .... ) — soltex
– soltex, Commented Jul 17, 2020 at 17:22
Is the intent to just loop over the array? .map() might be an overkill. Can use simple for loop or for (item of array) {..}. — ambianBeing
– ambianBeing, Commented Jul 17, 2020 at 17:23

trincot · Accepted Answer · 2020-07-17 17:38:55Z

2

The reason is that await does not occur directly in your async function, but in a function that is passed to .map (which is not async).

Besides, .map is abused here, since you do not return anything in the callback, nor use the array that .map returns.

Just use a for loop instead:

const myfunction = async () => {
    for (let item of [1,2,3]) {      
        const endpoint = "/api/";
        await apiService(endpoint, "POST", item)
            .then((r) => console.log(r))
    }
}

Also, using then is an antipattern here, since await is actually there to avoid using that. So better code it like this:

const myfunction = async () => {
    for (let item of [1,2,3]) {      
        const endpoint = "/api/";
        let r = await apiService(endpoint, "POST", item)
        console.log(r);
    }
}

edited Jul 17, 2020 at 17:38

answered Jul 17, 2020 at 17:22

trincot

357k38 gold badges282 silver badges338 bronze badges

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

3 Comments

Anoop K George Over a year ago

Kudos for the clarification.

Anoop K George Over a year ago

Where will I put the async key work in the above function as you suggested ?

trincot Over a year ago

async can stay where it was. For clarity I added the function wrapper that you had also in my answer.

micronyks · Accepted Answer · 2020-07-17 17:23:15Z

1

const myfunction =  () => {
    [1,2,3].map( async(item) => { // async should be here
      
      const endpoint = "/api/";

      await apiService(endpoint, "POST", item)
        .then((r) => console.log(r))
        
    });
  };

answered Jul 17, 2020 at 17:23

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

Comments

Nafeo Alam · Accepted Answer · 2020-07-17 17:23:35Z

1

This should work

 const myfunction = () => {
    [1,2,3].map(async (item) => {
      
      const endpoint = "/api/";

      await apiService(endpoint, "POST", item)
        .then((r) => console.log(r))
        
    });
  };

answered Jul 17, 2020 at 17:23

Nafeo Alam

4,7273 gold badges16 silver badges22 bronze badges

Collectives™ on Stack Overflow

JS, use of Async Await function in Axios when mapping over an array

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related