javascript:处理服务器尚未为其分配 id 的客户端发起的对象

Question

我正在开发一个 JavaScript 应用程序，我正在尝试使服务器端同步尽可能自动且不引人注目

我面临的问题是，当创建对象客户端时，我可以立即发送创建 ajax 请求，并在等待它返回时，在必要时将对象添加到 ui

但是，由于该对象在服务器响应之前没有 id，因此在服务器响应并更新其 id 之前，我无法对其执行任何更新或销毁操作

处理这个问题的最佳方法是什么？

一些代码(如果有帮助的话):

create_object = function() {

  return {

    save: function() {
      if (this.isNew()) {
        this.create();
      } else {
        this.update();
      }
    },  

    isNew: function() {
      return (this.id === undefined || this.id === null);
    },

    update: function () {
      $.ajax({
        url: '/update_object/'+this.id+'.json',
        type: 'post',
        dataType: 'json',
        data: this
      });
    },

    create: function () {
      var object = this;
      $.ajax({
        url: '/create_object',
        type: 'post',
        dataType: 'json',
        data: this,
        success: function(data) {
          object.id = data.id;
        }
      });
    },

    destory: function () {
      $.ajax({
        url: '/destroy_object/'+this.id+'.json',
        type: 'get',
        dataType: 'json'
      });
    }

  };

};

var object = create_object();
object.message = "Foo!";
object.save();

// this will create a new object until object.save has responded
object.message = "Bar!";
object.save();

// this wont work until object.save has responded
object.destroy();

Answer 1

这并不是一个真正的问题。 AJAX 本质上是异步的(异步Javascript 和 XML)。您必须等到收到服务器的响应才能更新您的 UI。

如果您必须立即更新 UI，您可以创建一个带有占位符 ID 的元素，然后在服务器响应后使用实际 ID 进行更新。

更新

这是对您的评论的回应。 Web 应用程序并不是纯粹的客户端应用程序。它们适合客户端-服务器范式。您可以尝试使用同步发布，但这会产生副作用，即在服务器响应之前占用浏览器(这是因为 Javascript 是单线程的)。

话虽如此，服务器的响应应该非常快，除非您的网络速度很慢，或者您发送到服务器的任何内容会导致一些计算密集型操作。

采用占位符路线将(正如您所意识到的)导致您必须处理的各种新问题。您必须确保它们是唯一的。现在，如果他们在服务器响应 id 之前对客户端元素执行某些操作会怎样？服务器不会知道占位符 id 的含义。有很多方法可以解决这个问题(排队请求是一种方法)，但它会使您的代码变得更加复杂。我认为仅仅为了让 UI 更新更快而进行权衡是不值得的。

一个选项是向用户提供一些视觉反馈，表明应用程序正在“运行”(即，当您等待服务器的响应时)。例如，旋转器。

就堆叠 AJAX 请求而言，这是您可以使用 jQuery message-queuing 采取的一种方法。插件。