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

Question

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

此外，我在使用 ajax 的全局变量和局部变量时遇到了问题。请查看我的代码，您会看到从不返回值的粗体文本，问题一直存在于成功块中，列表变量在块外时不会更新。那有什么问题？我该如何解决这个错误？

再次感谢您！

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