Убедитесь, что внутреннее отложенное завершено перед внешним «затем»

Question

Если у меня есть два вложенных отложенных объекта, и я жду, чтобы они закончили, как я могу убедиться, что их then заканчивается перед внешними then триггерами?

$.when($.ajax({ 
    method: 'PUT', 
    url: someURL, 
    data: { 
     // My data 
    }, 
    callback: function(r) { 

     var deferred1 = $.Deferred(); 
     var deferred2 = $.Deferred(); 

     $.ajax({ 
      method: 'PUT', 
      url: url1, 
      data: { 
       // My data 
      } 
     }).complete(deferred1.resolve); 

     $.ajax({ 
      method: 'PUT', 
      url: url2, 
      data: { 
       // My data 
      } 
     }).complete(deferred2.resolve); 

     $.when(deferred1, deferred2).then(function() { 
      self.parent.container.dialog('close').remove(); 
      self.parent.configurator.container.dialog('close').remove(); 
     }); 
    }, 
})).then(function() { 
    // Some work; e.g. close a loading spinner 
}); 

С выше кодой, сразу же, как deferred1 и deferred2 разрешается, наружная then называется перед тем внутренние then

Answer 1

Обещание не магическое, они не могут просто знать, когда «работу делается ", единственный способ, которым они могут проверить завершение, - до возвращаемое значение. Если вы хотите связать обещания, вы должны должны вернуться с ваших цепей.

В этом примере вы не возвращаетесь после вызова, поэтому он не ждет.

Кроме того - вам не нужно обернуть регулярные обещания с $.when, чем $.when делает конвертировать один или несколько возможно обещает в перспективны для их значений.

$.ajax({ 
    method: 'PUT', 
    url: someURL, 
    data: { 
     // My data 
    }, 
}).then(function(result){ 
    var p1 = $.ajax({ // $.ajax already returns a promise 
     method: 'PUT', 
     url: url1, 
     data: { 
      // My data 
     } 
    }) 
    var p2 = $.ajax({ 
     method: 'PUT', 
     url: url2, 
     data: { 
      // My data 
     } 
    }); 
    return $.when(p1, p2); 
}).then(function() { 
    self.parent.container.dialog('close').remove(); 
    self.parent.configurator.container.dialog('close').remove(); 
}).then(function() { 
    // some action 
});