axios 正确的承诺链接方式

tp5buhyn  于 2022-11-05  发布在  iOS
关注(0)|答案(1)|浏览(148)

我有一个表单,如果用户输入一个号码牌,我想在提交数据之前查找数据并设置Vue数据属性。
我有一个方法可以做到这一点:

/**
 * Retrieves the carbon emissions for a given journey based on the distance 
 * as well as the given license plate (if any)
 */
retrieveCarbonEmissions: function() {
    return axios.get(`/api/expenses/dvla/${this.vehicle_registration}`)
        .then(response => {
            this.carbon_emissions = (response.data.co2emission * this.miles).toFixed(2);
        })
        .catch((error) => {
            // console.log(error.response);

            this.$swal({
                type: 'error',
                title: 'Oops...',
                text: 'Please enter a valid registration number in the "Car Registration" field.',
            });
        })
}

我使用return是为了返回Promise,以便在方法链中使用它,如下所示:

/**
 * Submit the given expense, if there is a number plate we'll try to get the CO2 emissions.
 * 
 */
submitExpense: function(){
    this.loader = this.$loading.show({
        container: this.fullPage ? null : this.$refs.editPersonalExpenseFormContainer
    });

    if(this.vehicle_registration){
        this.retrieveCarbonEmissions()
            .then((response) => {
                this.saveExpense();
            }).catch((error) => {
                console.log(error);
            });
    } else{
        this.saveExpense();
    }
},

但是,内部方法将在解析承诺后运行,而不管它是否失败。
我怎么说做这个,然后做那个,但如果它失败了就停止做事情?

uinbv5nw

uinbv5nw1#

发生这种情况是因为retrieveCarbonEmissions中的.catch()。当这个.catch()所链接的承诺被拒绝时,它的回调函数决定了.catch()(以及retrieveCarbonEmissions)返回的承诺的解析。在您的例子中,它返回undefined,这意味着返回的承诺是 * fullled *,而不是 rejected
若要使其拒绝,请在catch回调中添加throw error;,以重新引发错误。

相关问题