Troubleshooting VueJS Promise.all Problem

Question

Troubleshooting VueJS Promise.all Problem

I need help implementing promise-based logic for asynchronous data fetching in VueJS.

Previously, I had the following logic:

if (influencer.suggested?.length && url.length) {
    const [ interactions, suggested_ids ] = await Promise.all([
        $axios.$get(url),
        store.dispatch('influencers/FETCH_SET', influencer.suggested),
    ]);
    return ({
        interactions,
        suggested_ids,
    });
}

However, the if conditions were dependent on each other, and I want them to be independent so that one can execute even if the other is false.

Here is my updated implementation:

if (store.getters['user/is_band']) {
    url = '/band/history/?influencer_id=' + influencer.id;
}

const interactionPromise = new Promise((resolve, reject) => {
    if (url.length) {
        resolve($axios.$get(url));
    } else {
        reject();
    }
});

const suggestionPromise = new Promise((resolve, reject) => {
    if (influencer.suggested?.length) {
        resolve(store.dispatch('influencers/FETCH_SET', influencer.suggested));
    } else {
        reject();
    }
});

const [interactions, suggested_ids] = await Promise.all([
    interactionPromise.catch(error => console.log(error)),
    suggestionPromise.catch(error => console.log(error)),
]);

return ({
    interactions,
    suggested_ids,
});

It appears that when one of the promises is rejected, it should failover to the other one, but this doesn't seem to be happening.

In addition, if store.getters['user/is_band'] is false, the app crashes. How can I prevent this from happening?

Any assistance with executing Promise.all without crashing if one of the promises is rejected would be greatly appreciated!

javascript vue.js promise

Answer 1

Answer №1

My approach to tackling this issue would be as follows:

// Initializing variables for later assignment
let interactions, suggested_ids;

// If the user is a band
if (store.getters['user/is_band']) {
    try {
        interactions = await $axios.$get('/band/history/?influencer_id=' + influencer.id);
    } catch (ex) {
        // Handling rejected Promise
    }
}

// Check if there are suggested influencers for the current influencer
if (influencer.suggested?.length) {
    try {
        suggested_ids = await store.dispatch('influencers/FETCH_SET', influencer.suggested);
    } catch (ex) {
        // Handling rejected Promise
    }
}

return {
    interactions,
    suggested_ids
};

In my opinion, using Promise.all may not be the most suitable solution in this case because it combines all Promises and provides a single resolve or reject state. This means that if any one Promise is rejected, the entire Promise.all will be rejected.

By dividing the promises like this, you have more control over how each promise is handled independently.

Answer 2

My approach to tackling this issue would be as follows:

// Initializing variables for later assignment
let interactions, suggested_ids;

// If the user is a band
if (store.getters['user/is_band']) {
    try {
        interactions = await $axios.$get('/band/history/?influencer_id=' + influencer.id);
    } catch (ex) {
        // Handling rejected Promise
    }
}

// Check if there are suggested influencers for the current influencer
if (influencer.suggested?.length) {
    try {
        suggested_ids = await store.dispatch('influencers/FETCH_SET', influencer.suggested);
    } catch (ex) {
        // Handling rejected Promise
    }
}

return {
    interactions,
    suggested_ids
};

In my opinion, using Promise.all may not be the most suitable solution in this case because it combines all Promises and provides a single resolve or reject state. This means that if any one Promise is rejected, the entire Promise.all will be rejected.

By dividing the promises like this, you have more control over how each promise is handled independently.

Answer 3

Answer №2

Triggering Promise.all will result in rejection if any of the elements are rejected, but this behavior can be modified by handling potential rejections.

(async function() {

const p1 = new Promise((resolve, reject) => { 
  setTimeout(() => resolve('p1_delayed_resolution'), 1000); 
}); 

const p2 = new Promise((resolve, reject) => {
  reject('p2_immediate_rejection');
});


const [p1Result, p2Result] = await Promise.all([
  p1.catch(error => error ),
  p2.catch(error => error ),
]);

console.log(p1Result, p2Result)
}());

For your scenario, a similar implementation would look like:

const [ interactions, suggested_ids ] = await Promise.all([
        $axios.$get(url).catch(e => e),
        store.dispatch('influencers/FETCH_SET', influencer.suggested).catch(e => e),
    ]);

Answer 4

Triggering Promise.all will result in rejection if any of the elements are rejected, but this behavior can be modified by handling potential rejections.

(async function() {

const p1 = new Promise((resolve, reject) => { 
  setTimeout(() => resolve('p1_delayed_resolution'), 1000); 
}); 

const p2 = new Promise((resolve, reject) => {
  reject('p2_immediate_rejection');
});


const [p1Result, p2Result] = await Promise.all([
  p1.catch(error => error ),
  p2.catch(error => error ),
]);

console.log(p1Result, p2Result)
}());

For your scenario, a similar implementation would look like:

const [ interactions, suggested_ids ] = await Promise.all([
        $axios.$get(url).catch(e => e),
        store.dispatch('influencers/FETCH_SET', influencer.suggested).catch(e => e),
    ]);

Troubleshooting VueJS Promise.all Problem

Answer №1

Answer №2

Similar questions

I often find myself frustrated while using Next.js because the console automatically clears itself, making it difficult for me

The NUXT project encounters issues when trying to compile

AngularJS directive for automatically resizing Dygraph on page load

Having difficulty retrieving data despite providing the correct URL

Obtain the name of the model in Vue.js using either the input's ID or name attribute

combine and refresh identical items within an array

Testing Vue Components: A Comprehensive Guide

The information is undefined, yet it is being recorded in the console

The appearance of SVG markers varies depending on the screen they are viewed on

What takes precedence in npm scripts - local dependencies or global ones?

Utilizing JQuery to merge variable identifiers

Looking for guidance on JavaScript - Implementing a different font family for each div element

The two-word string is failing to pass through the query string

What is the basic structure of a JSON-like object?

What is the best way to programmatically select a checkbox that was created dynamically using jQuery?

What steps should be taken to resolve the error message "EROFS: read-only file system, attempting to open '/var/task/db.json'?"

JavaScript error leading to ERR_ABORTED message showing up in the console

Loading page with asynchronous JavaScript requests

Extract a selection from a dropdown menu in ReactJS

When flex items are stacked in a column, the bottom portion may be truncated