来自 Fluxxor 的 Ajax 请求未发送成功操作

Posted 2023-02-22

【中文标题】来自 Fluxxor 的 Ajax 请求未发送成功操作

【英文标题】：Ajax request from Fluxxor not dispatching success action

【发布时间】：2015-09-27 08:56:24

【问题描述】：

我正在尝试从使用 Fluxxor 的 Flux 操作中使用 jquery.ajax。我正在处理 http://fluxxor.com/guides/async-data.html 的异步示例。

调用成功（我收到了响应），但我不知道为什么它没有调度 LOAD_BUZZ_SUCCESS。

我正在替换这段代码：

 var BuzzwordClient = 
      load: function(success, failure) 
        setTimeout(function() 
          success(_.range(10).map(Faker.Company.catchPhrase));
        , 1000);
      
    //...
    ;

与

var BuzzwordClient = 
  load: function(success, failure) 
      jquery.ajax(
          url: "test.json",
          dataType: 'json',
          cache: false,
          success: function(data) 
            console.log("success");
            console.log(data);

          .bind(this),
          error: function(xhr, status, err) 
              console.log("error");
          .bind(this)
      );
  
//...
;

调用来自actions var：

BuzzwordClient.load(function(words) 
      this.dispatch(constants.LOAD_BUZZ_SUCCESS, words: words);
    .bind(this), function(error) 
      this.dispatch(constants.LOAD_BUZZ_FAIL, error: error);
    .bind(this));
  

我需要用其他东西包装 ajax 调用吗？客户端的加载函数应该返回什么？

【参考方案1】：

当你打电话时

BuzzwordClient.load(function(words) 
  this.dispatch(constants.LOAD_BUZZ_SUCCESS, words: words);
.bind(this), function(error) 
  this.dispatch(constants.LOAD_BUZZ_FAIL, error: error);
.bind(this));

传递给load的两个函数在load方法的参数success和failure中可用：

var BuzzwordClient = 
  load: function(success, failure) 

但是这些函数永远不会被调用。请注意原始示例如何调用传递的success 函数，并传入以下语句：

success(_.range(10).map(Faker.Company.catchPhrase));

你需要在你的 Ajax 回调中做同样的事情：

var BuzzwordClient = 
  load: function(success, failure) 
      jquery.ajax(
          url: "test.json",
          dataType: 'json',
          cache: false,
          success: function(data) 
            success(data); // or something similar
          ,
          error: function(xhr, status, err) 
            failure(err); // or something similar
          
      );
  
//...
;

这是一个简单的例子：http://jsfiddle.net/BinaryMuse/6p98L2h8/

客户端的加载函数应该返回什么？

一般来说，异步函数不返回任何东西。您关心的值直到稍后才可用（这就是使其异步的原因），因此您需要使用回调来执行流程。

您也可以使用类似 Promise 的东西来抽象出其中的一部分，但在 javascript 中，您仍然会在某些时候回退到回调。

【讨论】：

谢谢！我现在能够触发成功回调，但有效负载是成功对象而不是响应。如何从该对象中提取响应？做 payload.responseJSON 似乎不起作用（给我一个未定义的）。谢谢！

@sutee 动作的有效载荷是this.dispatch 的第二个参数，所以在这种情况下它是对象words: words。如果你想包含额外的数据，你需要自己把它放在那里，可能将success回调修改为BuzzwordClient.load以接受必要的数据。

也许我的问题现在超出了这个问题的范围，但我试图弄清楚如何从有效负载中提取我的响应 JSON。就我而言，words 是我的 ajax 响应返回的对象，我不知道如何提取“服务器”返回的 JSON。当我调度到 LOAD_BUZZ_SUCCESS 并尝试在 onAddBuzzSuccess 内部执行 payload.responseJSON 时，我可以看到有效负载，但 responseJSON 未定义。可能是时间问题。我认为我的问题更多的是关于 jquery，但很高兴看到一个使用 json 响应进行调用的 Fluxxor 示例。谢谢！

@sutee 是的，你可能是对的。如果您还有其他问题，请查看this simple example 和contact me。

感谢您的示例！它帮助我让一切正常工作。我的问题是我在整个 ajax 调用中包装了success 回调函数。我认为这个示例对其他刚开始使用 Fluxxor 的人也会有所帮助！