javascript - 嵌套 AJAX 调用和 $.when.apply 列表 - 延迟 promise 无法正常工作

Question

我正在尝试进行一系列三重嵌套的 AJAX 调用；基本结构如下(我省略了失败调用)。

它正在通过 eventCalls 工作到第二级。最终的when.apply.done 仅在每次对event.eventUsers.href 的调用按预期完成后才会触发。但第三个 ajax 调用(即检索用户信息的 event.eventUser.href 调用的完成中的一个)在when block 中的console.log 之后执行。我确信我只是没有完全理解延期/ promise 的概念，有人能澄清这一点吗？谢谢!

$.ajax({
  type: 'GET'
  url: '/api/events'
}).done(function(events, textStatus, jqXHR) {
  var eventCalls = [];
  $.each(events.items, function(index, event) {
    eventCalls.push(
      $.ajax({
        type: 'GET',
        url: event.eventUsers.href // Assoc objects for EventUser
        data: 'type=host' // Only one eventUser is returned
      }).done(function(eventUsers, textStatus, jqXHR) {
        // Getting the eventUser's user information
        $.ajax({
          type: 'GET',
          url: eventUsers.items[0].user.href
        }).done(function(user, textStatus, jqXHR) {
          event.host = user;
        })
      })
    )
  })
  $.when.apply($, eventCalls).done(function() {
    console.log(events);
  })
})

Answer 1

这是通过使用简化的整个过程:

• $.get() 代替 $.ajax()
• $.map() 创建 Promise 数组

并更正为:

• .then() 代替 .done() 始终
• 从 .then 回调中获得适当的返回值。

$.get('/api/events').then(function(events) {
    var queryString = 'type=host';//defined outside the $.map() loop for efficiency.
    var promises = $.map(events.items, function(item) {//$.map() loops through events.items and returns an array
        return $.get(item.eventUsers.href, queryString).then(function(eventUsers) {//note `return` 
            return $.get(eventUsers.items[0].user.href).then(function(user) {//note `return` 
                item.host = user;
                return item;//this return determines the value with which the final promise is resolved.
            });
        });
    });
    //at this point, `promises` is an array of promises each of which will be resolved when its `item.host` has been set
    $.when.apply(null, promises).then(function() {
        console.dir(events);
    });
});