3

我正在使用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;**
        },
})
4

2 回答 2

3

我不知道如何在回流中做到这一点，但在正常的通量架构中，你会这样做：

    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 操作，设置其数据，然后触发更改事件。

于 2014-12-15T15:21:52.593 回答
1

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 Promises（推荐）

返回一个JavaScript 承诺then()并使用函数设置回调。我使用kriskowal 的 promise 实现

例子

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
});
于 2014-12-16T07:53:23.547 回答