如何在一個路由中進行多個ajax調用？

Question

我正在嘗試從2個類別（新聞和事件）獲得兩個2個博客帖子列表，然后在我的主頁的2個不同列中顯示它們。 我需要執行2個單獨的Ajax調用來獲取這些博客帖子。 我不使用ember-data進行此操作，因為我沒有看到在這種情況下使用它的優勢（但我可能錯了）。

export default Ember.Route.extend({
  setupController(controller, model) {
    var wpUrl = 'http://public-api.wordpress.com/rest/v1/sites/company.wordpress.com/posts/?number=2&category=';

    Ember.$.ajax({ url: wpUrl + 'news', dataType: "jsonp", type: 'GET' }).then(function (data) {
      controller.set('news', data.posts);
    });
    Ember.$.ajax({ url: wpUrl + 'events', dataType: "jsonp", type: 'GET' }).then(function (data) {
      controller.set('events', data.posts);
    });
  }
});

上面的代碼有效。 但是根據我在Ember文檔中的內容，我應該在model鈎子（而不是setupController ）中獲取這些數據以利用promises。 所以我嘗試用這種方式重新編寫代碼：

export default Ember.Route.extend({
  model() {
    var wpUrl = 'http://public-api.wordpress.com/rest/v1/sites/company.wordpress.com/posts/?number=2&category=';

    return {
      news: function () {
        return Ember.$.ajax({ url: wpUrl + 'news', dataType: "jsonp", type: 'GET' }).then(function (data) {
          return data.posts;
        })
      },
      events: function () {
        return Ember.$.ajax({ url: wpUrl + 'events', dataType: "jsonp", type: 'GET' }).then(function (data) {
          return data.posts;
        })
      }
    };
  }
});

但這不起作用。 在頁面渲染之后，Ajax調用已經完成，但為時已晚。 我不確定我做錯了什么。 在這種情況下使用ember-data會有什么好處嗎？

Answer 1

您可以使用RSVP.hash()返回Promises的哈希值

你可以這樣做：

export default Ember.Route.extend({
    model() {
        var wpUrl = 'http://public-api.wordpress.com/rest/v1/sites/company.wordpress.com/posts/?number=2&category=';

        return new Ember.RSVP.hash({
            news: Ember.$.ajax({ url: wpUrl + 'news', dataType: "jsonp", type: 'GET' }),
            events: Ember.$.ajax({ url: wpUrl + 'events', dataType: "jsonp", type: 'GET' })
        });
    }
});

在這里閱讀更多關於Ember的承諾

Answer 2

您返回一個包含兩個promise的對象，而不是一個實際的promise。 你需要的是建立自己的承諾（Ember.RSVP.Promise），一旦兩個內部承諾解決，它將被解決。