如果重构，则无法重构AJAX调用

Question

This is what the code looked like before:

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

I use this to bind the data to a select field and it work perfectly, but now I will need the same code in a different place, so I decided to separate the call in a different file so I can reuse it. This is the refactored AJAX call:

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

And now this is what the first function looks like:

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

The first console log is undefined and the second one looks OK, has all the data there, but also has a __proto__ element that I have no idea why is there. Because the array returned isn't null, the select gets bound but for some reason it's empty. Any idea where I'm going wrong?

Also while typing all this above, I remembered that the API call is async (I'm using ASP.NET MVC 5 for the API) and maybe that has something to do with it?

Answer 1

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

You're correct. Unfortunately you can't just return a value from an async call, but you'll have to use a callback, or you could look into promises . Here's an example how you might refactor your code:

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