如何在 FLUX 中处理 ajax 响应

Posted 2023-02-22

【中文标题】如何在 FLUX 中处理 ajax 响应

【英文标题】：How to handle ajax response in FLUX

【发布时间】：2017-03-10 06:44:57

【问题描述】：

我是 FLUX 的新手，我对如何在 FLUX 中处理 ajax 有疑问。

我的情况如下：

我有文件 commentAPI.js

//all js files are compiled from coffescript

// fetching all comments from server
    _fetchComments: function() 
       var promise;
       promise = $.ajax(
         url: "comments/show",
         type: "GET",
         dataType: "json"
        );
        return promise.then(function(response) 
         // here should be any action ?
        , function(error) 
         return console.log(error);
        );   

然后我有 commentActions.js

   fetchComments: function () 
    allcomments=commentAPI._fetchComments(); 
    return Dispatcher.dispatch(
      actionType: ActionTypes.ALL_COMMENTS,
      comments: allcomments
    );
  

此代码实际上不起作用，因为在 commentActions.js 中调用的函数 _fetchComments 返回整个承诺。

我想做什么： 我想从 ajax 回调函数中获取响应并将结果传递给我的有效负载对象，然后由 Dispatcher 在 中的 _fetchComments() 函数中调度它commentActions.js

最好的方法是什么？如何获得对 ajax 回调函数响应的访问权限？

【参考方案1】：

您应该调度 _fetchComments 函数，并在解决该承诺后，调用操作 fetchComments。

在反应代码中，您应该调用异步函数（即 _fetchComments）。

在你的例子中：

// fetching all comments from server
    _fetchComments: function() 
       var promise;
       promise = $.ajax(
         url: "comments/show",
         type: "GET",
         dataType: "json"
        );
        return promise.then(function(response) 
         // put the sync action here
         fetchComments(response)
        , function(error) 
         return console.log(error);
        );   

并且不要忘记将其从操作中移除（即 fetchComments）

【讨论】：

如果我理解得很好。 ..我必须在承诺解决的部分代码中调用操作 fetchComments 并假设我知道如何更新我的商店，然后我没有在我的***组件中调用 fetchComments 方法，而是我调用我的异步方法_fetchComments() ?

类似的东西。您必须从组件调度异步操作（_fetchComments），这就是它的调用方式。 See here redux async actions