错误发生后，承诺会继续 [英] Promise continues after error

问题描述

我有一些异步代码需要在发生错误的情况下停止，但仍会继续执行:

  async saveCoupons({state，rootState，dispatch，commit}){const promises = []state.userCoupons.forEach(coupon => {如果(coupon.isNew和& coupon.isUpdated){//如果用户正在创建新的优惠券promises.push(Vue.axios.post('/api_producer/coupons.json'，优惠券，{参数:{令牌:coupon.token}}))}否则，如果(！coupon.isNew& coupon.isUpdated){//如果用户正在更新优惠券promises.push(Vue.axios.patch(`api_producer/coupons/$ {coupon.id}/`，优惠券，{参数:{令牌:coupon.token}}))}})尝试 {等待Promise.all(承诺)dispatch('utilities/showModal'，'success'，{root:true})dispatch('fetchProducerCoupons')} catch(err){让couponToken = err.request.responseURL.split('token =')[1]commit('ADD_ERROR_ON_COUPON'，couponToken)console.log(err)}} 

这是当前代码的结构，工作方式，但我意识到这很糟糕.我需要做的是停止执行

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

如果其中一个api调用失败.我想在forEach中捕获错误，因此我已经有了可用的项目，并且可以立即将错误添加到错误中，而不是在之后执行错误(这就是我现在使用 {params:{标记:coupon.token}} .

我认为最好的方法是将 Vue.axios 请求包装到您自己的Promise中.然后，如果请求失败，则您的优惠券令牌中有错误.

类似

  const promises = [];promises.push(Vue.axios.post('/api_producer/coupons.json'，优惠券).catch(()=> {throw new Error(coupon.token)}));Promise.all(promises).catch(令牌=> {tokens.forEach(令牌=> {//提交/处理错误的令牌});});  

I have some async code that needs to stop in case of error but keeps executing:

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)
    }
}

This is how the code is currently structured, it works, but I realize it's terrible. What I need to do is stop the excution of

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

In case one of the api calls fails. I wanted to catch the error inside the forEach so I already have the item available and I can add the error to it right away as opposed to doing it after (which is what I'm doing now with { params: { token: coupon.token } }.

解决方案

I think the best way would be to wrap the Vue.axios requests into your own Promise. Then, if the requests fail, you have the coupon tokens in your error.

Something like

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 => {
    // Commit/handle errorous token
  });
});

这篇关于错误发生后，承诺会继续的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！