in reflux, how can i get data from asp.net web api

Question

i'am using reflux of reactjs. From Store's action of reflux, i wrote a action to get data from asp.net web api, i think that just only way to get data which use to ajax, someone say with me, i can get data with a plugin jquery but i don't believe it because the $.ajax is best way. I search everything on google but i don't see to resolve for that. If you know something to resolve, please share with me, i really thanks.

Beside, i had a problem with global and local variable of ajax. Please review my code, you can see the bold text which never return a value, the problem which stay with the block of success, the list var isn't update when it outside of the block. What's up problem with that ? how can i fix that error ?

Thank you very much, again!

(function (Reflux, WorkHistoryActions, global) {

    global.workhistoryStore = Reflux.createStore({

        listenables: [WorkHistoryActions],

        init: function () {
            this.storyArr = [];
        },

        getItems: function (resume_id) {
            console.log(resume_id)
            **var list = [];**
            $.ajax({
                type: "get",
                url: global.getHost() + "/api/workhistories/6969607988340821009",
                dataType: 'json',
                crossDomain: true,
                success: function (data) {

                    $.each(data, function (i, v) {
                        **list.push(v);**
                    })

                }
            });
            **return list;**
        },
})

Answer 1

I am not sure how to do it in reflux but in a normal flux architecture you would do like so:

    getItems: function (resume_id) {
        $.ajax({
            type: "get",
            url: global.getHost() + "/api/workhistories/6969607988340821009",
            dataType: 'json',
            crossDomain: true,
            success: function(result) {
                workHistoryActionCreator.receiveItems(result);
            },
            error: function(error) {
                workHistoryActionCreator.failToReceiveItems(error);
            }
        });
    }

The store registers to the dispatcher for the actions RECEIVED_WORK_HISTORY_ITEMS and FAILED_TO_RECEIVE_WORK_HISTORY_ITEMS, sets its data and then fires the change event.

Answer 2

JavaScript is an event-driven system where AJAX requests are also Async and the response from the server is received asynchronously.

Using async: false is a bad practice as it will freeze your application and block any parallel execution.

So with async: true (which is default), you can't call a function which makes an AJAX call and returns the response.

Solution #1: Callbacks (old-school)

Modify your getItems function to receive another parameter which is a callback function, when you receive a response from the server, call that callback function and pass list as a parameter to that function call.

Example

getItems: function(resume_id, callback) {

    $.ajax({
        type: "get",
        url: global.getHost() + "/api/workhistories/6969607988340821009",
        dataType: 'json',
        crossDomain: true,
        success: function (data) {

            var list = [];

            $.each(data, function (i, v) {
                list.push(v);
            })

            callback(list);

        }
    });

    // Return nothing

}

How to use?

getItem(resume_id, function(list){

});

---

Solution #2: JavaScript Promises (recommended)

Return a JavaScript promise and set the callback using then() function. I use kriskowal's promise implementation

Example

getItems: function (resume_id) {

    var deferred = Q.defer();

    $.ajax({
        type: "get",
        url: global.getHost() + "/api/workhistories/6969607988340821009",
        dataType: 'json',
        crossDomain: true,
        success: function (data) {

            var list = [];

            $.each(data, function (i, v) {
                list.push(v);
            });

            deferred.resolve(list);


        }
    });

    return deferred.promise;

}

How to use?

getItem(resume_id).then(function(list){
    // use list
});