Ember.js: параллельная загрузка родительской и дочерней моделей - PullRequest
Новая
       29

Ember.js: параллельная загрузка родительской и дочерней моделей

0 голосов
/ 27 сентября 2019

У меня есть следующие маршруты:

  • сообщений
    • index (все сообщения)
    • single (с динамическим параметром post_id )
      • index (отдельный пост и просмотр его комментариев)
      • edit (редактирование поста)

Есть два отдельныхзапросы на выборку сообщения по идентификатору и получение комментариев к записи по идентификатору записи.Я хочу загружать пост и комментарии для маршрута posts.single.index параллельно, потому что у меня есть идентификатор поста в названии маршрута, и мне не нужно ждать, когда пост будет загружен.

Но Ember загружает posts.single модель, и только ПОСЛЕ публикации он загружает комментарии.

Можно ли вызывать дочернюю модель параллельно с родительской моделью?

У меня естьнашел решение, когда posts.single ничего не загружает, а posts.single.index вызывает два запроса в своей собственной модели.С другой стороны, я должен загрузить модель поста во всех posts.single дочерних маршрутах, таких как posts.single.edit .Это может быть проблемой, когда приложение будет расти.

1 Ответ

2 голосов
/ 27 сентября 2019

Это сильно зависит от вашего внутреннего API, и если вы используете Ember Data или обычный fetch / ajax запрос.

Самый простой случай - использование Ember Dataвместе с JSON: API , который поддерживает включение связанных ресурсов : 

import Route from '@ember/routing/route';

export default Route.extend({
  model({ post_id }) {
    return this.store.findRecord('post', post_id, { include: 'comments' });
  }
});

Если вы используете обычный fetch, вы можете использовать Promise.all() для загрузкинесколько записей параллельно: 

import Route from '@ember/routing/route';

export default Route.extend({
  async model({ post_id }) {
    let [post, comments] = await Promise.all([
      fetch(`/posts/${post_id}`),
      fetch(`/posts/${post_id}/comments`),
    ]);
    return { post, comments };
  }
});

Если вам не нравится синтаксис Promise.all() с уничтожением массива, вы можете захотеть взглянуть на RSVP.hash().rsvp по умолчанию связан с ember.

Если вы делаете это с Ember Data, но ваш API не поддерживает боковую загрузку, это немного сложнее, так как вам нужно использовать запрос для загрузки комментариев.Это зависит от конфигурации вашего адаптера, но я думаю, это будет выглядеть так: 

import Route from '@ember/routing/route';

export default Route.extend({
  async model({ post_id }) {
    let [post, comments] = await Promise.all([
      this.store.findRecord('post', post_id),
      this.store.query('comment', {
        filter: {
          post: post_id
        }
      })
    ]);
    return { post, comments };
  }
});
...