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

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)
      });
  }
//...
};

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

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/

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

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

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