Data within an array can become compromised when passing through a complex series of nested asynchronous arrow

Question

Data within an array can become compromised when passing through a complex series of nested asynchronous arrow

This discussion thread delves into the intricacies of sync versus async operations and offers potential solutions. However, despite implementing one of the suggested solutions, I continue to encounter errors. I believe I have reached my limit in understanding ES here, and I am in dire need of assistance as I cannot comprehend why this issue persists. Below is the code snippet from my nuxt project, which I migrated from a backend built on express.

async fetch({store, error}) {
  let series = '', courses = [], album = {}
  store.state.courses.forEach(async course => {
    album = {...course}
    series = course.uri.split('/')[2]
    try {
     const {data: {data}} = await axios.get('http://localhost:3000/luvlyapi/videos', {
      params: {
        series  //? album id
      }
    })
    album['videos'] = data
    courses.push(album)
    console.log('loop', courses)
  } catch (err) {
    error({statusCode: err.statusCode, message: err})
  }
})
console.log({courses})
store.commit('SET_COURSES', courses)

} https://i.sstatic.net/4zZ0z.jpg

Despite pushing elements into the array within the loop, it remains empty once the loop concludes.

javascript ajax ecmascript-6 es6-promise arrow-functions

Answer 1

Answer №1

.forEach() doesn't pause for your asynchronous callback. It simply continues through its loop while you log the value of courses, and later when all the await operations inside your callback finish, the values are added to courses. This timing issue arises when you're accessing the variable before it's populated with data.

It's important to note that await only pauses the local function execution (the closest function scope), in this case, the .forEach() callback. It does not cause any higher-level processes to pause. Since .forEach() doesn't check what your callback returns, it doesn't consider the promise returned by the async callback's completion. Consequently, once you reach the await, the async callback returns a promise while the .forEach() loop proceeds to the next iteration even though the await inside the callback isn't finished yet.

Remember, await only halts the local function, not anything above or outside it. When your async function hits an await, it returns a promise to the outer world. To halt everything including the caller functions, some action must be taken on that promise which .forEach() doesn't do.

In contrast, a for loop keeps the await within the actual function, pausing the entire scope with the await. If you require a loop to pause with an await, opt for a for loop over a .forEach() loop.

For instance, consider this code:

async fetch({store, error}) {
    let series = '',  courses = [],  album = {};
    for (let course of store.state.courses) {
        album = {...course}
        series = course.uri.split('/')[2]
        try {
            const {data: {data}} = await axios.get('http://localhost:3000/luvlyapi/videos', {
                params: {
                    series //? album id
                }
            })
            album['videos'] = data
            courses.push(album)
            console.log('loop', courses)
        } catch (err) {
            error({
                statusCode: err.statusCode,
                message: err
            })
        }
    }
    console.log({courses})
    store.commit('SET_COURSES', courses)
}

Additionally, there's an issue in your original implementation regarding sharing higher-level scoped variables among concurrent async callbacks, leading one to overwrite another. The remedy involves either serializing the async calls as demonstrated in my example or defining the variables locally within the async scope to give each async callback its own separate variables.

Answer 2

.forEach() doesn't pause for your asynchronous callback. It simply continues through its loop while you log the value of courses, and later when all the await operations inside your callback finish, the values are added to courses. This timing issue arises when you're accessing the variable before it's populated with data.

It's important to note that await only pauses the local function execution (the closest function scope), in this case, the .forEach() callback. It does not cause any higher-level processes to pause. Since .forEach() doesn't check what your callback returns, it doesn't consider the promise returned by the async callback's completion. Consequently, once you reach the await, the async callback returns a promise while the .forEach() loop proceeds to the next iteration even though the await inside the callback isn't finished yet.

Remember, await only halts the local function, not anything above or outside it. When your async function hits an await, it returns a promise to the outer world. To halt everything including the caller functions, some action must be taken on that promise which .forEach() doesn't do.

In contrast, a for loop keeps the await within the actual function, pausing the entire scope with the await. If you require a loop to pause with an await, opt for a for loop over a .forEach() loop.

For instance, consider this code:

async fetch({store, error}) {
    let series = '',  courses = [],  album = {};
    for (let course of store.state.courses) {
        album = {...course}
        series = course.uri.split('/')[2]
        try {
            const {data: {data}} = await axios.get('http://localhost:3000/luvlyapi/videos', {
                params: {
                    series //? album id
                }
            })
            album['videos'] = data
            courses.push(album)
            console.log('loop', courses)
        } catch (err) {
            error({
                statusCode: err.statusCode,
                message: err
            })
        }
    }
    console.log({courses})
    store.commit('SET_COURSES', courses)
}

Additionally, there's an issue in your original implementation regarding sharing higher-level scoped variables among concurrent async callbacks, leading one to overwrite another. The remedy involves either serializing the async calls as demonstrated in my example or defining the variables locally within the async scope to give each async callback its own separate variables.

Answer 3

Answer №2

When trying to implement Promise.all in your code, follow these steps:

async fetch({ store, error }) {
  let series = '', courses = [], album = {}
  let pr = store.state.courses.map(course => {
    return new Promise(resolve => {
      album = { ...course }
      series = course.uri.split('/')[2]
      try {
        const { data: { data } } = await axios.get('http://localhost:3000/luvlyapi/videos', {
          params: {
            series  //? album id
          }
        })
        album['videos'] = data
        courses.push(album)
        console.log('loop', courses)
        resolve();
      } catch (err) {
        error({ statusCode: err.statusCode, message: err })
      }
    })
  });

  await Promise.all(pr);

  console.log({ courses })
  store.commit('SET_COURSES', courses)
}

If you encounter issues with await inside forEach loop not waiting, for more information visit this link

Answer 4

When trying to implement Promise.all in your code, follow these steps:

async fetch({ store, error }) {
  let series = '', courses = [], album = {}
  let pr = store.state.courses.map(course => {
    return new Promise(resolve => {
      album = { ...course }
      series = course.uri.split('/')[2]
      try {
        const { data: { data } } = await axios.get('http://localhost:3000/luvlyapi/videos', {
          params: {
            series  //? album id
          }
        })
        album['videos'] = data
        courses.push(album)
        console.log('loop', courses)
        resolve();
      } catch (err) {
        error({ statusCode: err.statusCode, message: err })
      }
    })
  });

  await Promise.all(pr);

  console.log({ courses })
  store.commit('SET_COURSES', courses)
}

If you encounter issues with await inside forEach loop not waiting, for more information visit this link

Data within an array can become compromised when passing through a complex series of nested asynchronous arrow

Answer №1

Answer №2

Similar questions

Tips for verifying that an input field only accepts values from an array in Angular 6

Place an image in the middle of a div with text aligned to the right side

Omit words from list in a route in Express.js

How can I trigger an Onclick event from an <a tag without text in a Javascript form using Selenium?

Unable to activate the navbar toggle feature on Bootstrap 4.0

When trying to gather multiple parameters using @Param in a NestJS controller, the retrieved values turn out

issue with mongoose virtual populate (unable to retrieve populated field)

Issues arise when the ViewBag does not update

The execution of Node.js on data is triggered only after the content has been successfully written

Converting a JSON array into an object representation

Looking for a more efficient method to pass components with hooks? Look no further, as I have a solution ready for

Using jQuery to append an <option> element to a <select> tag

React Material UI - All radio buttons within a list can be individually selected

Safari not updating Angular ng-style properly

dynamically assigning a style attribute based on the dimensions of an image retrieved from a URL

A guide on updating content within curly braces when a user inputs into a React form

What to do when the 'image' property in Next.js next/image has an implicit 'any' type and needs fixing?

The data type 'unknown' cannot be directly converted to a 'number' type in TypeScript

Using Vue to dynamically set custom validation messages

Toggle the flag status of a checkbox based on the response provided in dialogues (Angular)