【问题标题】:Combine 2 ajax calls into 1 callback将 2 个 ajax 调用合并为 1 个回调
【发布时间】:2015-10-05 19:06:44
【问题描述】:

我正在构建一个 Chrome 扩展程序,我需要组合 2 个单独的 AJAX 调用,以便我有 1 个成功回调。最好的方法是什么?

Auth.prototype.updateContact = function(id, contact_obj) {
  var self = this,
      contact_str = JSON.stringify(contact_obj);

  return new RSVP.Promise(function(resolve, reject) {
    self.authorize()
      .then(function() {
        $.ajax({
          type: "PUT",
          url: self.url + "contacts/" + id,
          contentType: "application/json; charset=utf-8",
          data: contact_str,
          dataType: "json",
          success: function(data) {
            resolve(data);
          },
          error: function(jqXHR, textStatus, errorThrown) {
            var msg = "updateContact error: request: " + id + " " +
                  contact_str + " response: " + jqXHR.responseText +
                  " e=" + JSON.stringify(errorThrown);
            sendErrorBackground(msg);
            reject(jqXHR);
          }
        });
      });
  });
};

Auth.prototype.updateContactList = function(id, list_obj) {
  var self = this,
      list_str = JSON.stringify(list_obj);

  return new RSVP.Promise(function(resolve, reject) {
    self.authorize()
      .then(function() {
        $.ajax({
          type: "POST",
          url: self.url + "add_lists",
          contentType: "application/json; charset=utf-8",
          data: list_str,
          dataType: "json",
          success: function(data) {
            resolve(data);
          },
          error: function(jqXHR, textStatus, errorThrown) {
            var msg = "updateContactList error: request: " + id + " " +
                  list_str + " response: " + jqXHR.responseText +
                  " e=" + JSON.stringify(errorThrown);
            sendErrorBackground(msg);
            reject(jqXHR);
          }
        });
      });
  });
};

尝试使用@Saar的建议

Auth.prototype.updateContact = function(id, contact_obj, list_obj) {
  var self = this,
      contact_str = JSON.stringify(contact_obj),
      list_str = JSON.stringify(list_obj);


  var promiseA = new RSVP.Promise(function(resolve, reject) {
        self.authorize().then(function() {
          $.ajax({
            type: "PUT",
            url: self.url + "contacts/" + id,
            contentType: "application/json; charset=utf-8",
            data: contact_str,
            dataType: "json",
            success: function(data) {
              return data
            }
          });
        });
      });

  var promiseB = new RSVP.Promise(function(resolve, reject) {
    self.authorize().then(function() {
        $.ajax({
          type: "POST",
          url: self.url + "add_lists",
          contentType: "application/json; charset=utf-8",
          data: list_str,
          dataType: "json",
          success: function(data) {
            return data
          }
        });
      });
    });

  $.when(promiseA, promiseB).then(function(resultA, resultB) {
    console.log(resultB);
  });
};

【问题讨论】:

  • 你已经在使用 Promise 和 jQuery,只需使用 $.when(promiseA,promiseB).then(function(resultA,resultB){//do something here});
  • 我读过关于使用 $.when 的信息,但我对 promises 不是很熟悉。我编辑了我的帖子以包含我对您的解决方案的最佳尝试,但控制台只记录承诺对象,有什么想法吗?

标签: javascript jquery ajax google-chrome-extension callback


【解决方案1】:

如果您使用 RSVP 承诺,那么您需要使用“全部”

Auth.prototype.updateContact = function (id, contact_obj, list_obj) {
    var self = this,
        contact_str = JSON.stringify(contact_obj),
        list_str = JSON.stringify(list_obj);


    var promiseA = new RSVP.Promise(function (resolve, reject) {
        self.authorize().then(function () {
            $.ajax({
                type: "PUT",
                url: self.url + "contacts/" + id,
                contentType: "application/json; charset=utf-8",
                data: contact_str,
                dataType: "json",
                success: function (data) {
                    return data
                }
            });
        });
    });

    var promiseB = new RSVP.Promise(function (resolve, reject) {
        self.authorize().then(function () {
            $.ajax({
                type: "POST",
                url: self.url + "add_lists",
                contentType: "application/json; charset=utf-8",
                data: list_str,
                dataType: "json",
                success: function (data) {
                    return data
                }
            });
        });
    });


    var promises = [promiseA, promiseB];

    RSVP.all(promises).then(function (results) {
        // results contains an array of results for the given promises
        console.log(results);
    }).catch(function (reason) {
        // if any of the promises fails.
    });
};

【讨论】:

  • 我收到一个错误 - Error in event handler for runtime.onMessage: TypeError: Cannot read property 'then' of undefined。不过,它可能会在扩展中的其他地方中断。我会做一些调查,谢谢你的帮助。
  • 如果你能提供一个小提琴,我会帮你的。很高兴
  • 谢谢,但设置小提琴可能需要很长时间。如果我想通了,我会回来更新这个。我认为您为我指出了正确的方向,它现在从每个调用中返回一个对象,它可能只是在其他地方返回意外结果,这会破坏它。
  • 只是为了记录,在 ext 的其他地方出现了意外的结果,我没有正确返回 RSVP.all 中的结果。再次感谢您的帮助。
猜你喜欢
  • 1970-01-01
  • 2016-05-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-27
  • 2013-11-05
  • 2020-12-06
  • 1970-01-01
相关资源
最近更新 更多