javascript - 如何在一条 route 进行多个 ajax 调用？

Question

我正在尝试从 2 个类别(新闻和事件)中获取两个 get 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 Hook (而不是 setupController)中获取这些数据以利用 promise 。所以我尝试以这种方式重写我的代码:

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()

返回 Promise 的哈希值

你可以这样做:

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 中的 promise here