В рефлюкс, как я могу получить данные из веб-API asp.net

Question

Я использую рефлюкс реактивов. Из-за действия рефлюкса в Store я написал действие для получения данных из веб-интерфейса asp.net, и я думаю, что это единственный способ получить данные, которые используют ajax, кто-то сказал мне, что я могу получить данные с помощью плагина jquery, но я не не верю, потому что $.ajax - лучший способ. Я ищу все на Google, но я не вижу, чтобы решить это. Если вы знаете что-то, чтобы решить, пожалуйста, поделитесь со мной, я действительно благодарен.

Кроме того, у меня была проблема с глобальной и локальной переменной AJAX. Пожалуйста, просмотрите мой код, вы можете увидеть жирный текст, который никогда не возвращает значение, проблема, которая остается с блоком успеха, список var не обновляется, когда он выходит за пределы блока. В чем проблема с этим? как я могу исправить эту ошибку?

Большое спасибо, еще раз!

(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

Я не уверен, как это сделать с рефлюксом, но в обычной архитектуре потока вы бы сделали так:

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

Хранилище регистрируется в диспетчере для действий RECEIVED_WORK_HISTORY_ITEMS и FAILED_TO_RECEIVE_WORK_HISTORY_ITEMS, устанавливает свои данные и затем запускает событие изменения.

Answer 2

JavaScript - это система, управляемая событиями, в которой запросы AJAX также являются асинхронными, а ответ от сервера принимается асинхронно.

С помощью async: false Это плохая практика, так как она замораживает ваше приложение и блокирует любое параллельное выполнение.

Так с async: true (что по умолчанию), вы не можете вызвать функцию, которая делает AJAX-вызов и возвращает ответ.

Решение № 1: Обратные вызовы (старая школа)

Изменить ваш getItems функция для получения другого параметра, который является функцией обратного вызова, когда вы получаете ответ от сервера, вызываете эту функцию обратного вызова и передаете list в качестве параметра для вызова этой функции.

пример

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

}

Как пользоваться?

getItem(resume_id, function(list){

});

---

Решение №2: обещания JavaScript (рекомендуется)

Вернуть обещание JavaScript и установить обратный вызов, используя then() функция. Я использую обещание Kriskowal реализации

пример

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;

}

Как пользоваться?

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