在另一个函数中同步调用 javascript 函数答案

【问题标题】：calling javascript function within another function synchronously在另一个函数中同步调用 javascript 函数
【发布时间】：2018-04-05 09:30:34
【问题描述】：

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

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

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

【问题讨论】：

我们需要查看更多您的代码。上面handleQuantity 中对this.handleTotalAmount() 的调用绝对是同步的。 handleQuantity 似乎是一个事件处理程序，因此在调用该事件处理程序时它将是同步的，但是...
如果 getQuantity 是一个异步函数，那么您可能会使用 async-await。比如async handleQuantity(e){ var charCode = (e.which) ? e.which : e.keyCode; if(charCode === 13 || charCode === 9) { e.preventDefault(); await this.props.getQuantity(this.props.item.product_quantity); this.handleTotalAmount(); } }或者使用componentDidUpdate生命周期方法
@T.J.Crowder - 添加了this.props.getQuantity(this.props.item.product_quantity);的Ajax api调用代码

标签： javascript reactjs

【解决方案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                       // ***
            });                                                     // ***
    }
}

【讨论】：

它给Uncaught TypeError: Cannot read property 'then' of undefined 错误正在使用。然后像这样.then(this.handleTotalAmount())
@Karthikeyan：如果您收到该错误，则您尚未修改 getQuantity 以返回承诺。此外，这不是您使用then 的方式。（但我使用.then 的答案代码也是错误的，现已修复：.then(() => this.handleTotalAmount())。）
我遵循了您的代码。但不知何故得到了Uncaught TypeError: Cannot read property 'then' of undefined 错误。以及在 Ajax 调用结束之前触发的 this.handleTotalAmount() 函数。
@Karthikeyan：恕我直言，上面的代码肯定不会有这些问题。