Is wrapping most of the code in callback function a common practise in JS?

Question

If anyone could explain to me, what is the common practise for handling the data fetched from ajax call?

Having a callback function allows to use the fetched data WITHIN the callback function.

Therefore I assume that the only way to 'play' with the data is to wrap a big chunk of the code that has got any functions relying on the data, inside the callback function?

Thank you. // Side note - I read How do I return the response from an asynchronous call? already.

My question is about the common practise.

var my_data;

$.ajax({
        method: "GET",
        url: "exampleurl",
        success: callback

});

function callback(response) {
    this.response = response;
    var my_data = response;

    // Does here go all the functions that will ever use my_data? 


};

Really not sure what you mean. Your callback function can just store the received data wherever you want, and then other functions can access it there. — Máté Safranka, Mar 28 '18 at 11:36
@MátéSafranka can you explain how can a separate function (outside of callback function) access any data stored in callback function please? — user007, Mar 28 '18 at 11:44
That's the point: it doesn't need to. Your callback function can just store the response in a place where other functions can access it. — Máté Safranka, Mar 28 '18 at 11:45
Your are thinking in the wrong direction. You need to think in asynchronous mode. If you have a traitement depending of this data, then just call it in callback function, that's all. — Merlin, Mar 28 '18 at 11:54
@Merlin Yeah, or that. Really depends on the scenario. If you need to immediately process the response, then just invoke whatever function needs it from the callback. If you need to store it for later operations, just put it somewhere other functions can reach it. You can work some magic with closures and such if you're worried about visibility. — Máté Safranka, Mar 28 '18 at 11:58
But this solution is not safe. You have no way of knowing if the data is here or not. The better option for me is Promise here. — Merlin, Mar 28 '18 at 12:00
I am still not following it... Assuming that I have a separate function named changeChart that is depending on the my_data, how would I call the callback function from within the changeChart function to get the my_data to changeChart? — user007, Mar 28 '18 at 12:04

score 1 · Accepted Answer · answered Mar 28 '18 at 11:53

Your callback function can just store the response data outside of its own scope. Here's a very rough example:

var DataManager = {
    data: null,

    loadData: function() {
        $.ajax({
            method: 'GET',
            url: '/getdata',
            success: this.onload.bind(this),
        });
    }

    onload: function(response) {
        this.data = response;
    },
};

When you call DataManager.loadData(), it will use its own onload method as the success callback (.bind() is necessary so that the this keyword will refer to DataManager when onload is invoked).

onload stores the response in the data property of the DataManager object, which is public. After that, any function can access the response as DataManager.data.

score 1 · Answer 2 · answered Mar 28 '18 at 12:10

You should use a Promise. Here is an example :

const remoteData = $.ajax({
    method: "GET",
    url: "exampleurl"
});

const muteRemoteData = remoteData.then(callback)

You can continue to chain call to it and change your html or other like this

muteRemoteData.then( data => htmlDiv.innerHtml = data)

Is wrapping most of the code in callback function a common practise in JS?

2 Answers2