如何在一个路由中进行多个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)以利用承诺.所以我尝试用这种方式重新编写代码:

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

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

你可以这样做:

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的承诺