What causes unexpected outcomes when using async / await with Array.map()?

Question

What causes unexpected outcomes when using async / await with Array.map()?

Below is a functional version of my code that produces the expected output:

***.then(r => r.json()).then(async r => {

                    for (let i = 0; i < r.length; i++) {
                        let pipeline = r[i];
                        pipeline.collapsed = true;
                        pipeline.levels = await this.getPipelineLevels(pipeline.id);
                    }

                    this.project.pipelines.items = r;
                })

Here is the problematic version that is yielding unexpected results:

****.then(r => r.json()).then(r => {
                    let pipelines = r.map(async (value) => {
                        let levels = await this.getPipelineLevels(value.id);
                        return {...value, collapsed: true, levels: levels};
                    });

                    this.project.pipelines.levels = pipelines;

An odd result in the console when using

console.log(JSON.stringify(pipelines))

after *.map():

[{"_c":[],"_s":0,"_d":false,"_h":0,"_n":false},{"_c":[],"_s":0,"_d":false,"_h":0,"_n":false}]

Can you figure out what could be causing this issue?

javascript vue.js async-await arrow-functions

Answer 1

Answer №1

Since Array.map does not await its passed callback, it disregards the fact that you labeled its callback as async.

Simply map your Promises using Array.map and then pass them to Promise.all, letting it handle the awaiting process in parallel for you.

const getPipelineLevels = id => new Promise(resolve => {
  setTimeout(() => resolve({ id: id, foo: 'bar' }), 500)
})

const idx = [1,2,3,4,5]

const tasks = idx.map(id => {
  return getPipelineLevels(id)
    .then(value => ({ ...value, bar: 'baz' }))
})

Promise.all(tasks)
  .then(results => {
    console.log(results)
  })

Answer 2

Since Array.map does not await its passed callback, it disregards the fact that you labeled its callback as async.

Simply map your Promises using Array.map and then pass them to Promise.all, letting it handle the awaiting process in parallel for you.

const getPipelineLevels = id => new Promise(resolve => {
  setTimeout(() => resolve({ id: id, foo: 'bar' }), 500)
})

const idx = [1,2,3,4,5]

const tasks = idx.map(id => {
  return getPipelineLevels(id)
    .then(value => ({ ...value, bar: 'baz' }))
})

Promise.all(tasks)
  .then(results => {
    console.log(results)
  })

Answer 3

Answer №2

Consider implementing the following code snippet:

.then(async r => {
    let pipelines = await Promise.all(r.map(async value => {
        let levels = await this.getPipelineLevels(value.id);
        return {...value, collapsed: true, levels: levels};
    }));
    this.project.pipelines.levels = pipelines;
});

Array.map(async (value) => {...})

generates an array of Promises.

This approach would outperform the original intent, as it executes asynchronous tasks concurrently.

Furthermore, be mindful to avoid awaiting a .then(…) chain.

Answer 4

Consider implementing the following code snippet:

.then(async r => {
    let pipelines = await Promise.all(r.map(async value => {
        let levels = await this.getPipelineLevels(value.id);
        return {...value, collapsed: true, levels: levels};
    }));
    this.project.pipelines.levels = pipelines;
});

Array.map(async (value) => {...})

generates an array of Promises.

This approach would outperform the original intent, as it executes asynchronous tasks concurrently.

Furthermore, be mindful to avoid awaiting a .then(…) chain.

What causes unexpected outcomes when using async / await with Array.map()?

Answer №1

Answer №2

Similar questions

Apollo Client is not properly sending non-server-side rendered requests in conjunction with Next.js

A guide on successfully implementing Nuxt-img on nuxt3 generate!

The checkboxes do not appear to be updating visually when the "checked" property is toggled programmatically

Is it possible to create a button function in HTML that can alter the CSS image tag?

Implementing custom logic in a Vuetify dialog box

Trouble with comparing two datetime values in JavaScript

What are the reasons animation fails to function properly in React?

Utilize Angular to inject an input from a component directly into the header of my application

Is there a way to trigger an ajax call specifically on the textarea that has been expanded through jQuery?

Tips for submitting a form using javascript while preventing the default action

What is the best way to include a dialog div within a form tag?

JQuery-UI alert for Checkbox Selections

Having trouble rendering JSON encoded data in a JqPlot Chart within a PHP script

Initiating Calls from JavaScript to JavaFX

Exploring real-time data updates using React and the setInterval method

Implementing Pagination for a JSON Object using Javascript and Jquery

Saving data from the Viewbag into a jQuery array or object on the client side

The test suite encountered an error while trying to run due to being unable to locate the module 'vue-template-compiler' when utilizing Jest in

What is the best way to extract data from a jQuery JSON response that is wrapped in an object

Is there a way to inform the List component when the height of its row items has been altered in order to trigger a rerender