在回流中，我如何从asp.net web api获取数据

Question

我正在使用反应物的反流。从Store的回流动作开始，我写了一个从asp.net web api获取数据的动作，我认为只是获取用于ajax的数据的方法，有人跟我说，我可以用插件获取数据jquery但我不相信它，因为$ .ajax是最好的方式。我搜索谷歌上的所有内容，但我没有看到解决这个问题。如果你知道要解决的问题，请与我分享，我真的非常感谢。

此外，我遇到了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作为参数传递给该函数调用。 / p>

实施例

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 promise并使用then()函数设置回调。我使用kriskowal's promise implementation

实施例

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