Javascript跳过Ajax请求

Question

There is an ajax request which retrieves array of data from spring service.

This is the exact code snippet:

getData: function() {
            var me = this;
            var response = [];
            Backbone.ajax({
                url: 'http://localhost:8080/filters/clients',
                success: function(result) {
                    this.response = me.getFilterValues(result);
                    console.log(this.response+" response");
                }
            });
            return this.response;
        },

This is the call to this function from other model

this.set('data', DataProvider.getData(/*pass all selected values here*/));

As you can see on successful ajax request it returns data and passes it to other function which returns an array and then is being used to render view. After some debugging I noticed that at first when this set statement is called ajax is being skipped and so it returns value of undefined. After some time when it tries to access this undefined data object it finally does this ajax successfully but at that point its too late.

Why? Is it because its async and first time it gets the request is being sent and without any wait it goes straight to the next portion of code or what? Debugging shows that first time it comes to ajax it just gets the name and return line thats it.

Answer 1

You need to use a callback, that return is being hit while the request is still processing. Here's how you can refactor:

getData: function(callback) {
        var me = this;
        Backbone.ajax({
            url: 'http://localhost:8080/filters/clients',
            success: function(result) {
                callback(me.getFilterValues(result));
            }
        });
    },

And the setter:

DataProvider.getData(function(data) {
    //data is the response from your AJAX call
    this.set('data', data); //'this' may be the wrong context here.
});