Как предварительно загрузить часть данных в Angular при загрузке остальных?

Question

Я подумал, что умен, когда пытался загрузить первую страницу данных и отобразить ее, загружая весь набор в фоновом режиме. Я использовал следующий код:

ngOnInit() {
  this.service.getStuff(0, 10)
    .subscribe(suc => this.subset = suc);

  this.service.getStuff()
    .subscribe(suc => this.data = suc);
}

Затем я установил точку останова в моем API, выбирая и освобождая первый вызов и удерживая невыпущенным второй. Однако, согласно вкладке сети в моем браузере, оба вызова ожидают до тех пор, пока оба не будут завершены.

Я где-нибудь близко, чтобы работала предзагрузка, или это далеко, далеко ?

Фактический вызов выполняется обычным HttpClient и GET, возвращая наблюдаемое.

Answer 1

Angular HttpClients get() должен каждый раз возвращать новый Observable и не будет демонстрировать поведение, которое вы описываете.

Это полностью зависит от реализации this.service.getStuff(). Если реализация выглядит примерно так, как показано ниже, она должна возвращать новый Observable с каждым вызовом и делать его независимым от любого другого вызова / подписки.

doStuff() {
    return this.http.get('someUrl');
}

Вот пример двух наблюдаемых звонки работают независимо друг от друга - я поставил задержку, чтобы помочь продемонстрировать. Когда вы выполните это, первый вызов будет завершен и будет обработан перед вторым вызовом.

Компонент с логами инициализации c:

ngOnInit(){
this.myService.doSomething('todos/1', 100)
  .subscribe(resp => {
    this.first = resp;
  });

this.myService.doSomething('comments', 1500)
  .subscribe(resp => {
    this.second = resp;
  })
}

Пример службы:

@Injectable()
export class MyService {
  constructor(private http: HttpClient){}

  doSomething(route: string, withDelay?: number) {
    return this.http.get('https://jsonplaceholder.typicode.com/' + route)
      .pipe(delay(withDelay));
 }
}

Answer 2

Вам лучше использовать для этого какой-нибудь оператор Rx JS.

Это вызовет оба GET. Первым пришел первым обслужен.

merge(this.service.getStuff(0, 10), this.service.getStuff()).subscribe(data => {
  // do stuff with data
});

Ниже, switchMap будет запускать allStuff $ only только после того, как initialStuff $ испустил. Это вызовет второй запрос GET только после того, как будет выпущен первый.

const intialStuff$ = this.service.getStuff(0, 10).pipe(
  share()
);

const allStuff$ = intialStuff$.pipe(
  switchMap(() => this.service.getStuff())
);

intialStuff$.subscribe(...);
allStuff$.subscribe(...)

Обратите внимание, что, поскольку ни один из запросов не заблокирует рендеринг, вам определенно следует go с первым методом. Он получит все данные быстрее.