错误后承诺继续

Question

我有一些异步代码需要在出错时停止但继续执行：

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

这就是代码当前的结构，它可以工作，但我意识到这很糟糕。我需要做的是停止执行

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

如果其中一个 api 调用失败。我想在 forEach 中捕获错误，所以我已经有了可用的项目，我可以立即将错误添加到它，而不是之后再做（这就是我现在用 { params: { token: coupon.token } } 做的事情。

Answer 1

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

类似

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

Answer 2

您可以将您的 api 调用包装在另一个 Promise 中并检查状态。像这样的：

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

  })
);

reject 将阻止这两行代码被执行：

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

Answer 3

感谢 Moritz Schmitz v. Hülst & sklingler93 的帮助，我重新构建了代码并且它正在工作。

我想知道是否有一种方法可以仅使用 async/await 来编写所有这些...如果有人有想法，很想看看 :)

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(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) {
            // if the user is updating the coupon
            promises.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(promises)
        .then(() => {
            dispatch('utilities/showModal', 'success', { root: true })
            dispatch('fetchProducerCoupons')
        })
        .catch(err => console.error(err))
},