Unleashing the power of Vuex with promise chaining

Question

Unleashing the power of Vuex with promise chaining

One challenge I am facing is making API calls to retrieve an array of endpoints, which are then used to fetch data from another API.

// Raise isLoading flag
    this.$store.commit('isLoading', true);
    
    // Initial data fetch
    this.$store.dispatch('getAvailableProductGroups').then(() => {
      // Call API for every available product
      for(let group of this.$store.state.availableProductGroups) {
        // Check if it's the last API call
        this.$store.dispatch('getProductsData', group).then((response) => {
          // Reset isLoading flag
          // this.$store.commit('isLoading', false);
        });
      }
    });

When fetching the endpoints list from the first API, I set up an isLoading flag. However, I am unsure how to determine when the last promise has been resolved in order to reset the flag.

javascript vue.js vuex

Answer 1

Answer №1

// Set isLoadign flag to true
this.$store.commit('isLoading', true);
// Fetch initial data
this.$store.dispatch('getAvailableProductGroups')
  .then(() => {
    // Call API for each available product group
    return Promise.all(this.$store.state.availableProductGroups.map(group => {
      // Check if it's the last API call
      return this.$store.dispatch('getProductsData', group);
    });
  })
  .then((allResults) => {
    this.$store.commit('isLoading', false);
  });

However, it MUST be implemented in the store actions, not in the vue-component.

Answer 2

// Set isLoadign flag to true
this.$store.commit('isLoading', true);
// Fetch initial data
this.$store.dispatch('getAvailableProductGroups')
  .then(() => {
    // Call API for each available product group
    return Promise.all(this.$store.state.availableProductGroups.map(group => {
      // Check if it's the last API call
      return this.$store.dispatch('getProductsData', group);
    });
  })
  .then((allResults) => {
    this.$store.commit('isLoading', false);
  });

However, it MUST be implemented in the store actions, not in the vue-component.

Answer 3

Answer №2

If you want to handle multiple promises in an array, you can use .map() and then resolve them all at once with .all()

Approach without async/await

this.$store.commit('isLoading', true);
this.$store.dispatch('getAvailableProductGroups').then(() => {
    // Create an array of promises
    const groupPromises = this.$store.state.availableProductGroups.map(group =>  this.$store.dispatch('getProductsData', group))
    Promise.all(groupPromises).then( values => {
        // Results of all promises
        console.log(values);
        this.$store.commit('isLoading', false);
    });
});

Using async/await

async function performTasks() {
    try {
        this.$store.commit('isLoading', true);
        await this.$store.dispatch('getAvailableProductGroups')
        // Create promises array
        const groupPromises = this.$store.state.availableProductGroups.map(group =>  this.$store.dispatch('getProductsData', group))
        // Wait for all promises to resolve
        const arrayOfValues = await Promise.all(groupPromises);
        this.$store.commit('isLoading', false);
    } catch(err) {
        console.log(err);
    }
}

Answer 4

If you want to handle multiple promises in an array, you can use .map() and then resolve them all at once with .all()

Approach without async/await

this.$store.commit('isLoading', true);
this.$store.dispatch('getAvailableProductGroups').then(() => {
    // Create an array of promises
    const groupPromises = this.$store.state.availableProductGroups.map(group =>  this.$store.dispatch('getProductsData', group))
    Promise.all(groupPromises).then( values => {
        // Results of all promises
        console.log(values);
        this.$store.commit('isLoading', false);
    });
});

Using async/await

async function performTasks() {
    try {
        this.$store.commit('isLoading', true);
        await this.$store.dispatch('getAvailableProductGroups')
        // Create promises array
        const groupPromises = this.$store.state.availableProductGroups.map(group =>  this.$store.dispatch('getProductsData', group))
        // Wait for all promises to resolve
        const arrayOfValues = await Promise.all(groupPromises);
        this.$store.commit('isLoading', false);
    } catch(err) {
        console.log(err);
    }
}

Unleashing the power of Vuex with promise chaining

Answer №1

Answer №2

Similar questions

Error code 405 (METHOD NOT ALLOWED) is received when attempting to make a post request to an API

Efficiently submitting multiple forms in a single click

Sequelize - issue with foreign key in create include results in null value

Leveraging image values for selecting an image from a collection and showcasing it (Javascript)

Patience is key when awaiting a state update in the Vue.js router's beforeEnter guard

VueJS is unable to access the requested resource due to the absence of an 'Access-Control-Allow-Origin' header

What steps do I need to take for webpack to locate angular modules?

Can Angular Universal SSR be activated specifically for Googlebot User Agents?

Exploring a JavaScript object to verify if a property contains nested data elements

My component fails to load using Angular Router even though the URL is correct

React Error: Unable to iterate over this.state.descriptions

Issue with ngTable: Error retrieving data for server-side pagination

Updating Kendo by modifying the Angular model

Gridsome fails to update data following adjustments in API

Tips for implementing JWT in a Node.js-based proxy server:

Modify the universal variable through a jQuery action

Ensure you are focusing on elements exclusively contained within the parent table and not any child tables nested within its cells

Why is it that TypeScript does not issue any complaints concerning specific variables which are undefined?

Chorme is throwing a CSRF token mismatch error when working with Laravel API Sanctum

Issues have been identified with the functionality of the Am charts v3 XY in conjunction with a