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

Posted 2023-02-22

【中文标题】在回流中，我如何从 asp.net web api 获取数据

【英文标题】：in reflux, how can i get data from asp.net web api

【发布时间】：2015-02-13 16:36:09

【问题描述】：

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

【参考方案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向调度程序注册，设置其数据，然后触发更改事件。

【参考方案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
);

【讨论】：

我真的很感谢 Sanket，这个决心是个好主意，我会试试的。问题是成功功能块（1）和ajax（2）之外。对于 async = true，对于优先级，(2) 是第一，(1) 是第二。结果是返回空数据。

谢谢！在与第三方系统对话时，JavaScript 完全不同。一切都是通过回调/承诺完成的。当您迁移到 Node.js 和 Mongo 时，即使是 DB 语句也可以异步工作。

我看到nodejs很难接近，我公司最近转移到Nodejs和Mongo到Reactjs和.NET API和Mongo，我觉得很幸运^_^，即使我觉得配置回流很困难reactjs，因为它与requirejs有关，我检索了requirejs文档上的所有内容，但没有一步一步进行。你觉得 reactjs 和 angular 怎么样？。

我正在 Toptal 写一篇博文，将于本周发布。标题说，“为什么我从 AngularJS 切换到 React”。我将在这里分享链接。

那太好了，我会阅读你的帖子，完成后与我分享，我的电子邮件是“[e-mail]”。 _.