Question

我正在使用$ .when确定ajax promises数组何时完成。我遇到了，当$ .when激活ajax调用完成的那一刻，但是他们的回调/完成函数没有。我怎么能等待回调完成？

ajax调用如下所示：

$.when(promises).done(function(){
    // the values of objs change in the .done function of the request above
    // but when the following ajax got fired, the values haven´t changed yet
    if(DEV) console.info('send Json: ', objs);
    $.ajax({
      method: "POST",
      url: url,
      data: objs
    });
});

和$ .when s.th.像这样：

/user/${__Random(1,100,var1)}

Answer 1

我会通过使用jQuery v1.8或更高版本并使用then而不是fail和done以及成功/失败回调执行此操作：

var promise1 = $.ajax({
    /* ...params...*/
}).then(
    function(data) {
        // Handle success; if you modify what you get, `return` it
        // and it will get propagated
        return /*...`data` or updated `data` as appropriate...*/;
    },
    function(error) {
        // Handle failure
    }
);
var promise2 = /*...*/;

然后

$.when(promise1, promise2).then(
    function(data) {
        // Handle overall success; this will be called after the
        // earlier `then` callbacks on each request
    },
    function(error) {
        // Handle failure
    }
);

Live example on jsFiddle（遗憾的是，Stack Snippets不提供任何ajax功能）;完整来源

请注意$.when需要离散参数，而不是数组。如果你真的有一个数组，那么：

$.when.apply($, promises).then(
    // ...
);

...当然还有现代JavaScript引擎：

Promise.all(promises).then(
    // ...
);

上面的小提琴的完整来源，它使用jQuery v2.2.4：

log("Starting");
var promise1 = $.ajax({
    url: "/echo/json/"
}).then(
    function(data) {
        // Handle success; if you modify what you get, `return` it
        // and it will get propagated
        log("Got promise1's response, returning 'p1'");
        return 'p1';
    },
    function(error) {
        // Handle failure
    }
);
var promise2 = $.ajax({
    url: "/echo/json/"
}).then(
    function(data) {
        // Handle success; if you modify what you get, `return` it
        // and it will get propagated
        log("Got promise2's response, returning 'p2'");
        return 'p2';
    },
    function(error) {
        // Handle failure
    }
);

$.when(promise1, promise2).then(
    function(result1, result2) {
        // Handle overall success; this will be called after the
        // earlier `then` callbacks on each request
        log("Both are done", result1, result2);
    },
    function(error) {
        // Handle failure
    }
);

function log() {
    // Old-fashioned to stay ES5 compatible
    $("<pre>").text(Array.prototype.join.call(arguments, ", ")).appendTo(document.body);
}

Answer 2

你能否兑现你的承诺？有这样的事情（未经测试）：

$.ajax({
    method: 'POST',
    url: url,
    data: formData,
    processData: false,
    contentType: false
  }).then(
    function(data) {
      data = JSON.parse(data);
      var url = data.url;

      obj.set('src', url);

      // return your promises (if possible, I don't know where they come from)
      return promises
  }).then(
    function() {
       if(DEV) 
         console.info('send Json: ', objs);
       $.ajax({
         method: "POST",
         url: url,
         data: objs
       });
   });

Answer 3

使用此

$.ajax({
method: 'POST',
url: url,
data: formData,
processData: false,
contentType: false,
success: function(data){/* to handle success response */},
error: function(error){/* to handle error response */},
complete: function(data){/* to handle the response success or error*/}
});

Answer 4

你的ajax函数中的data = JSON.parse(data);不是改变数据对象而是创建一个新的数据对象，你需要将其返回，以便调用者可以抓住它试试这样，

function getData(){
    return $.ajax({
        method: 'POST',
        url: url,
        data: formData,
        processData: false,
        contentType: false
      }).then(
        function(data) {
          data = JSON.parse(data);
          var url = data.url;

          obj.set('src', url);
          return data;
      });
}

var data = $.when(promises).done(getData);

jQuery when - 等待多次成功/完成回调

4 个答案: