Question

我有一个带遗留代码的javascript项目。通过同步ajax创建一个具有属性的对象。像这样：

function App() {
  this.users = $.parseJSON(
    $.ajax({
      url: '/users'
      datatype: "json"
      async: false
    }).responseText);

  this.items = $.parseJSON(
    $.ajax({
      url: '/items'
      datatype: "json"
      async: false
    }).responseText);

  this.pets = $.parseJSON(
    $.ajax({
      url: '/pets'
      datatype: "json"
      async: false
    }).responseText);
}

当然，初始化后对象中的这些属性是可用的。但现在，我需要使用异步Ajax请求重写它。所以，这是我的问题：是否有最佳实践来创建具有许多Ajax属性的对象？

P.S。：我有一个想法 - 在所有请求之后使用promises链并创建对象。但我想知道：有什么解决方案吗？

Answer 1

你的想法非常接近。它不是一个链，ajax调用可以并行运行，但你需要知道它们何时完成。 jQuery有你的意思：$.when：

function App() {
    var t = this;
    t.readyPromise = $.when(
        $.ajax({
          url: '/users',
          dataType: "json",
          success: function(data) {
              t.users = data;
          }
        }),
        $.ajax({
          url: '/items',
          dataType: "json",
          success: function(data) {
              t.items = data;
          }
        }),
        $.ajax({
          url: '/pets',
          dataType: "json",
          success: function(data) {
              t.pets = data;
          }
        })
    );
}

由于App看起来像构造函数，因此我会注意到new App()获取的实例在readyPromise结算之前无法使用。您可能会重新组织代码，以便您没有部分构造的对象（部分构造的对象往往是个坏主意）。我们还可以利用$.when为我们收集承诺结果的方式：

function App(users, items, pets) {
    this.users = users;
    this.items = items;
    this.pets = pets;
}
App.get = function() {
    return $.when(
        $.ajax({
          url: '/users',
          dataType: "json"
        }),
        $.ajax({
          url: '/items',
          dataType: "json"
        }),
        $.ajax({
          url: '/pets',
          dataType: "json"
        })
    ).then(function(users, items, pets) {
        return new App(users, items, pets);
    });
};

用法：

App.get().then(function(app) {
    // use `app` here
});

直播示例：

function fakeAjax(opts) {
  var d = $.Deferred();
  setTimeout(function() {
    d.resolve(["some " + opts.url.substring(1)]);
  }, Math.floor(Math.random() * 500));
  return d.promise();
}
function App(users, items, pets) {
  this.users = users;
  this.items = items;
  this.pets = pets;
}
console.log("Getting...");
App.get = function() {
  return $.when(
    fakeAjax({
      url: '/users',
      dataType: "json"
    }),
    fakeAjax({
      url: '/items',
      dataType: "json"
    }),
    fakeAjax({
      url: '/pets',
      dataType: "json"
    })
  ).then(function(users, items, pets) {
    return new App(users, items, pets);
  });
};

// Usage:
App.get().then(function(app) {
  console.log(app);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

旁注：它是dataType，而不是datatype;我在上面已修好了。还有一些必不可少的逗号。

Answer 2

好主意;）

$.when($.ajax({
  url: '/users'
  datatype: "json"
}), $.ajax({
  url: '/item'
  datatype: "json"
}),  $.ajax({
  url: '/pets'
  datatype: "json"
})).done(function(users, item, pets) {
//blabla
});

Answer 3

您已经了解到Javascript变量是数据值的容器。

此代码为名为"Fiat"的变量指定一个简单值（car）：

var car = "Fiat";

对象也是变量。但是对象可以包含许多值。

此代码将多个值（"Fiat"，"500"，"white"）分配给名为car的变量：

var car = {type:"Fiat", model:"500", color:"white"};

有关详细信息，请参阅Object Properties

如何创建具有多个AJAX属性的javascript对象？

3 个答案: