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

я использую рефлюкс реакции. Из действия рефлюкса Store я написал действие для получения данных из веб-API 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;**
        },
})

reactjs reactjs-flux refluxjs
person Jimmy Mac    schedule 15.12.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

    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, устанавливает свои данные и затем запускает событие изменения.

person Esailija    schedule 15.12.2014
comment
@JimmyMac, который в значительной степени сделает ваше приложение непригодным для использования, вы, вероятно, ничего не заметите во время разработки, потому что ответы мгновенны, но в процессе производства вся вкладка полностью зависнет на время запроса. - person Esailija; 15.12.2014

arrow_upward
1
arrow_downward

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
});
person Sanket Sahu    schedule 16.12.2014
comment
Я действительно благодарю Санкет, это решение - хорошая идея, я попробую. проблема в блоке успеха func (1) и вне ajax (2). Для async = true, для приоритета (2) — первое, (1) — второе. И результат возвращает нулевые данные. - person Jimmy Mac; 16.12.2014
comment
Спасибо! JavaScript совершенно другой, когда дело доходит до взаимодействия со сторонней системой. Все делается через callbacks/promises. Когда вы переходите на Node.js и Mongo, даже операторы БД работают асинхронно. - person Sanket Sahu; 16.12.2014
comment
я вижу nodejs, к которому трудно подступиться, моя компания недавно перешла с Nodejs и Mongo на Reactjs и .NET API и Mongo, мне повезло ^_^, даже то, что мне сложно с config reflux для reactjs, потому что это связано с requirejs, я получил все в документах requirejs, но ничего не шаг за шагом. Что вы думаете о reactjs и angular? - person Jimmy Mac; 16.12.2014
comment
Я пишу сообщение в блоге Toptal, которое будет опубликовано на этой неделе. В заголовке написано: «Почему я перешел с AngularJS на React». Я поделюсь ссылкой здесь. - person Sanket Sahu; 16.12.2014
comment
это здорово, я прочитаю ваш пост, поделитесь со мной, когда вы закончите, здесь мой адрес электронной почты [email protected]. _. - person Jimmy Mac; 16.12.2014