Ajax 来自 Fluxxor 的请求未调度成功操作

Question

我正在尝试使用 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)
      });
  }
//...
};

调用来自操作 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 调用吗？客户端的加载函数应该是什么 return？

Answer 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/

What is the client's load function supposed to return?

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

您也可以使用诸如 promises 之类的东西来抽象掉其中的一部分，但在 JavaScript 中，您仍然会在某些时候回退到回调。

Ajax 来自 Fluxxor 的请求未调度成功操作

Ajax request from Fluxxor not dispatching success action

ajax

reactjs

reactjs-flux

flux