如果重構，則無法重構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調用是異步的（我正在使用API​​的ASP.NET MVC 5），也許與此有關嗎？

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