Progress persists despite setbacks

Question

Progress persists despite setbacks

Having some asynchronous code that needs to halt in case of error but continues to execute:

async saveCoupons({ state, rootState, dispatch, commit }) {
    const promises = []
    state.userCoupons.forEach(coupon => { 
        if (coupon.isNew && coupon.isUpdated) {
            // if the user is creating a new coupon
            promises.push(Vue.axios.post('/api_producer/coupons.json', coupon, { params: { token: coupon.token } }))
        } else if (!coupon.isNew && coupon.isUpdated) {
            // if the user is updating the coupon
            promises.push(Vue.axios.patch(`api_producer/coupons/${coupon.id}/`, coupon, { params: { token: coupon.token } }))
        }
    })
    try {
        await Promise.all(promises)
        dispatch('utilities/showModal', 'success', { root: true })
        dispatch('fetchProducerCoupons')
    } catch (err) {
        let couponToken = err.request.responseURL.split('token=')[1]
        commit('ADD_ERROR_ON_COUPON', couponToken)
        console.log(err)
    }
}

The current structure of the code functions, but it appears inefficient. The objective is to halt the execution of

dispatch('utilities/showModal', 'success', { root: true })
dispatch('fetchProducerCoupons')

If any of the API calls encounter an error. It is preferable to catch the error within the forEach loop to immediately access and handle the item rather than postponing it for later (as done with

{ params: { token: coupon.token } }

.

javascript asynchronous vue.js promise async-await

Answer 1

Answer №1

The optimal approach, in my opinion, would involve encapsulating the Vue.axios requests within a custom Promise. This way, if the requests encounter errors, you will still have access to the coupon tokens.

Here is an example implementation:

const promises = [];

promises.push(
  Vue.axios.post('/api_producer/coupons.json', coupon)
    .catch(() => { throw new Error(coupon.token) }));
    
Promise.all(promises).catch(tokens => {
  tokens.forEach(token => {
    // Handle error tokens here
  });
});

Answer 2

The optimal approach, in my opinion, would involve encapsulating the Vue.axios requests within a custom Promise. This way, if the requests encounter errors, you will still have access to the coupon tokens.

Here is an example implementation:

const promises = [];

promises.push(
  Vue.axios.post('/api_producer/coupons.json', coupon)
    .catch(() => { throw new Error(coupon.token) }));
    
Promise.all(promises).catch(tokens => {
  tokens.forEach(token => {
    // Handle error tokens here
  });
});

Answer 3

Answer №2

If you want to ensure the status of your API call, you can encapsulate it within another promise. Here is an example of how you can do this:

promises.push(

  new Promise((resolve, reject) => {

    Vue.axios.post('/api_producer/coupons.json', coupon, { params: { token: coupon.token } })
    .then((response) => {
      if (response.status !== 200) {
        coupon.error = true;
        reject();
      } else {
        resolve();
      }
    });

  })
);

Using the reject function will prevent the execution of the following two lines of code:

  dispatch('utilities/showModal', 'success', { root: true })
  dispatch('fetchProducerCoupons')

Answer 4

If you want to ensure the status of your API call, you can encapsulate it within another promise. Here is an example of how you can do this:

promises.push(

  new Promise((resolve, reject) => {

    Vue.axios.post('/api_producer/coupons.json', coupon, { params: { token: coupon.token } })
    .then((response) => {
      if (response.status !== 200) {
        coupon.error = true;
        reject();
      } else {
        resolve();
      }
    });

  })
);

Using the reject function will prevent the execution of the following two lines of code:

  dispatch('utilities/showModal', 'success', { root: true })
  dispatch('fetchProducerCoupons')

Answer 5

Answer №3

Big shoutout to Moritz Schmitz v. Hülst & sklingler93 for their assistance in helping me restructure the code, which is now fully functional.

I'm curious if there's a way to streamline all of this using async/await exclusively... If anyone has any insights, I'd greatly appreciate seeing them :)

updateCoupons({ state, rootState, dispatch, commit }) {
    const operations = []
    state.userCoupons.forEach(coupon => {          
        if (coupon.isNew && coupon.isUpdated) {
            // for creating a new coupon
            operations.push(new Promise((resolve, reject) => {
                Vue.axios.post('/api_producer/coupons.json', coupon)
                    .then(response => resolve(response))
                    .catch(err => {
                        reject(err)
                        commit('ADD_ERROR_ON_COUPON', coupon.token)
                    })                        
            }))
        } else if (!coupon.isNew && coupon.isUpdated) {
            // for updating an existing coupon
            operations.push(new Promise((resolve, reject) => {
                Vue.axios.patch(`api_producer/coupons/${coupon.id}/`, coupon)
                    .then(response => resolve(response))
                    .catch(err => {
                        reject(err)
                        commit('ADD_ERROR_ON_COUPON', coupon.token)
                    })
            }))
        }
    })
    Promise.all(operations)
        .then(() => {
            dispatch('utilities/showModal', 'success', { root: true })
            dispatch('fetchProducerCoupons')
        })
        .catch(err => console.error(err))
},

Answer 6

Big shoutout to Moritz Schmitz v. Hülst & sklingler93 for their assistance in helping me restructure the code, which is now fully functional.

I'm curious if there's a way to streamline all of this using async/await exclusively... If anyone has any insights, I'd greatly appreciate seeing them :)

updateCoupons({ state, rootState, dispatch, commit }) {
    const operations = []
    state.userCoupons.forEach(coupon => {          
        if (coupon.isNew && coupon.isUpdated) {
            // for creating a new coupon
            operations.push(new Promise((resolve, reject) => {
                Vue.axios.post('/api_producer/coupons.json', coupon)
                    .then(response => resolve(response))
                    .catch(err => {
                        reject(err)
                        commit('ADD_ERROR_ON_COUPON', coupon.token)
                    })                        
            }))
        } else if (!coupon.isNew && coupon.isUpdated) {
            // for updating an existing coupon
            operations.push(new Promise((resolve, reject) => {
                Vue.axios.patch(`api_producer/coupons/${coupon.id}/`, coupon)
                    .then(response => resolve(response))
                    .catch(err => {
                        reject(err)
                        commit('ADD_ERROR_ON_COUPON', coupon.token)
                    })
            }))
        }
    })
    Promise.all(operations)
        .then(() => {
            dispatch('utilities/showModal', 'success', { root: true })
            dispatch('fetchProducerCoupons')
        })
        .catch(err => console.error(err))
},

Progress persists despite setbacks

Answer №1

Answer №2

Answer №3

Similar questions

Insert information into a nested array using Mongoose

Utilizing internal PDF links in a Microsoft UWP application

Issue encountered in IE9 and IE10 when loading the angular library results in the "SCRIPT5007: Object expected" error for Angular JS

Exploring the possibilities of integrating jQuery into Firefox extensions

Streamlining all icons to a single downward rotation

Encountering a Next.js application error while utilizing the button tag in conjunction with generating metadata

Revise my perspective on a modification in the backbone model

Tips for troubleshooting a 422 (Unprocessable Entity) Error Response in a Vue/Laravel project

When utilizing the built-in filter in Angular 2 ag-grid, the Clear Filter button efficiently removes any text from the filter box without needing to refresh the

JavaScript API Response - conditional statement for handling a 'null' response

What is the most effective way to ensure that a child component only executes when a link is clicked on the Vue component?

Can you pinpoint the origin of the circular reference that triggers the error when using JSON.stringify?

Generating unique ID's for data posting in PHP and JavaScript

Retrieve data from FileReader's onload event asynchronously in Javascript

Getting started with html2canvas: A beginner's guide

Is it possible to calculate a variable within a dataset using existing data as a reference point?

Clicking on a chart causes a null error in the 'removeHoverStyle' function

JavaScript XML Serialization: Transforming Data into Strings

I have implemented a code snippet that verifies if the incoming week aligns with the existing week, triggering an alert accordingly

The node application route appears to be malfunctioning