Question

我想同步从handleTotalAmount函数调用handleQuantity函数。请找到我的以下代码。从handleQuantity触发this.handleTotalAmount()函数async但是，我想要同步触发（在执行this.props.getQuantity(this.props.item.product_quantity)之后）。但它现在按预期工作。

也添加了getQuantity Ajax API调用。所以，从handleQauntity函数我只想在this.handleTotalAmount()执行后触发this.props.getQuantity(this.props.item.product_quantity);函数。但是，它没有发生。它以异步方式工作。

getQuantity(item)
{
    ajax({
        url: 'api/getQuantity',
        method : 'GET',
        data: {
            data: JSON.stringify(item)
        }
    }, (data) => {
        if(data.error == null )
            {
                    //Something...  
            }
        else {
            alert(data.error);
            }

    });
}

handleTotalAmount()
{
    this.props.totalAmountChange();
}

handleQuantity(e){
    var charCode = (e.which) ? e.which : e.keyCode;
    if(charCode === 13 || charCode === 9)
        {
            e.preventDefault();
            this.props.getQuantity(this.props.item.product_quantity);
        }
    this.handleTotalAmount();
}

Answer 1

Ajax是异步的。代码中的任何内容都不会尝试确保在ajax调用完成时调用handleTotalAmount（实际上，无论您是否执行了ajax调用，代码始终都会调用它）。

我可能会以承诺解决这个问题。看起来你的ajax函数使用旧式回调，所以我们必须创建自己的承诺：

getQuantity(item)
{
    // Return the promise
    return new Promise((resolve, reject) => {
        ajax({
            url: 'api/getQuantity',
            method : 'GET',
            data: {
                data: JSON.stringify(item)
            }
        }, (data) => {
            if(data.error == null ) {
                // No error, resolve the promise
                resolve(data);
            }
            else {
                // Error, reject the promise
                reject(data.error);
            }
        });
    });
}

（最好给自己一个可重复使用的ajax 提供承诺，而不是一次性做这件事。）

然后更改您的事件处理程序以使用该承诺：

handleQuantity(e){
    var charCode = (e.which) ? e.which : e.keyCode;
    if(charCode === 13 || charCode === 9) {
        e.preventDefault();
        this.props.getQuantity(this.props.item.product_quantity)    // ***
            .then(() => this.handleTotalAmount())                   // ***
            .catch(error => {                                       // ***
                // Handle error appropriately                       // ***
            });                                                     // ***
    }
}

同步调用另一个函数中的javascript函数

1 个答案: