如果重构，重构 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);
            }
        });
}

我使用它来将数据绑定到一个选择字段并且它工作得很好，但是现在我需要在不同的地方使用相同的代码，所以我决定将调用分开在不同的文件中以便我可以重用它。这是重构的 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__ 元素，我不知道为什么会在那里。因为返回的数组不为空，所以选择被绑定，但由于某种原因它是空的。知道我哪里出错了吗？

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

Answer 1

我记得 API 调用是异步的 [...]，也许这与它有关？

你是对的。不幸的是，您不能只从异步调用中返回一个值，而是必须使用回调，或者您可以查看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);
    }
}