javascript - 如果重构，重构 AJAX 调用将不起作用

Question

这是之前的代码:

function getData(query) {
    $.ajax({
        url: "/Api/GetData/" + query,
            success: function (data) {
                var template = $dataTemplate.html();
                var html = Mustache.to_html(template, data);
                $dataField.html(html);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.responseText);
            }
        });
}

我用它来将数据绑定(bind)到选择字段，它工作得很好，但现在我需要在不同的地方使用相同的代码，所以我决定将调用分开在不同的文件中，以便我可以重用它。这是重构的 AJAX 调用:

function getDataApiCall(query) {
    $.ajax({
        url: "/Api/GetData/" + query,
            success: function (data) {
                console.log(data);
                return data;
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.responseText);
                return null;
            }
        });
}

现在第一个函数如下所示:

function getData(query) {
    var data = getDataApiCall(query);
    if (data != null)
    {
        console.log(data);
        var template = $dataTemplate.html();
        var html = Mustache.to_html(template, data);
        $dataField.html(html);
    }
}

第一个控制台日志未定义，第二个控制台日志看起来不错，其中包含所有数据，但也有一个 __proto__ 元素，我不知道为什么会在那里。因为返回的数组不为空，所以选择被绑定(bind)，但由于某种原因它是空的。知道我哪里出错了吗？

此外，在输入上面的所有内容时，我记得 API 调用是异步的(我使用 ASP.NET MVC 5 作为 API)，也许这与它有关？

Answer 1

I remembered that the API call is async [...] and maybe that has something to do with it?

你是对的。不幸的是，您不能只从异步调用返回一个值，而是必须使用回调，或者您可以查看 promises 。以下是如何重构代码的示例:

function getDataApiCall(query, onSuccess, onError) {
    $.ajax({
        url: "/Api/GetData/" + query,
            success: function (data) {
                console.log(data);
                onSuccess(data);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                onError(xhr.responseText);
            }
        });
}


function getData(query) {
    getDataApiCall(query, function(data) {
        if (data != null) {
            console.log(data);
            var template = $dataTemplate.html();
            var html = Mustache.to_html(template, data);
            $dataField.html(html);
        }
    }, function(err) {
        alert(err);
    }
}