在完成其他请求后调用 api 请求

Question

beforeTabSwitch: async (tab) => {

            let flag = false;
            if (tab === 'PAYMENT') {
                if (this.isManualValidated) {
                    flag = true;
                    this.savePayment().then((response) => {
                        this.placeOrder();
                    });


                }
            } 
            return flag;
        }
savePayment: async function () {
            this.$http.post(this.savePaymentRoute)
                .then(response => {
                    await this.getOrderSummary();
                })
                .catch(error => {
                });
},
placeOrder: async function () {
            this.$http.post(this.saveOrderRoute)
                .then(response => {
                })
                .catch(error => {
                    console.log('placeOrder | ' + error);
                })
        },

当点击下订单按钮时 beforeTabSwitch() 验证数据然后调用 savePayment() 。当 savePayment 请求完成后调用 getOrderSummary() 然后调用 placeOrder() 请求。

顺序调用：savePayment() > getOrderSummary() > placeOrder()

但问题是在执行 savePayment() 之后立即执行 placeOrder() 执行后开始执行，然后执行 getOrderSummary() 这是错误的。

我已经尝试使用 Promises、回调但同样的问题。

Answer 1

您需要开始编写一些干净的代码。您应该使用承诺方法或 async-await 方法。希望这段代码对您有所帮助：

beforeTabSwitch: async (tab) => {
    if (tab !== 'PAYMENT') {
        return false;
    }
    
    if (!this.isManualValidated) {
        return false;
    }

    try {
        const response = await this.savePayment();
        this.placeOrder();
    } catch (error) {
        console.log(error);
    }

    return true;
},
savePayment: async function () {
    try {
        const paymentResponse = await this.$http.post(this.savePaymentRoute);
        const summaryResponse = await this.getOrderSummary();
    } catch (error) {
        console.log(error);
    }
},
placeOrder: async function () {
    try {
        const response = await this.$http.post(this.saveOrderRoute);
    } catch (error) {
        console.log('placeOrder | ' + error);
    }
},

在完成其他请求后调用 api 请求

Calling api request after Complete other requests

javascript

callback

vue.js

es6-promise

vuejs2