Как работает функция init?

Question

Почему console.log("init2"); печатается раньше console.log("init1");? И когда я выполняю console.log(categories); внутри подписки, я получаю правильный массив в консоли, но когда console.log(this.categories); выполняется вне подписки, я не получаю массив в консоли, а вывод не определен. Почему? Как мне это исправить?

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CategoryService } from 'src/app/modules/common/services/category.service';
import { CourseService } from '../../services/course.service';
import { mergeMap, map } from 'rxjs/operators';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.css']
})
export class CoursesComponent implements OnInit, OnDestroy {

  categories: any[];
  courses: any[];
  sub: Subscription;

  constructor(private categoryService : CategoryService, private courseService : CourseService) { }

  ngOnInit() {
    this.sub = this.categoryService.getAllcategories()
    .pipe(
      mergeMap(categories => this.courseService.getAllCourses().pipe(
        map(courses => [categories, courses])
      ))).subscribe(([categories, courses]) => {
        this.categories = categories;
        this.courses = courses;
        console.log("init1");
        console.log(categories);
      });
      console.log("init2");
      console.log(this.categories);

  }

  getCoursesByCategory(key: any)
  {
      //console.log(key);
      return this.courses.filter(course => course.category == key)
  }

  ngOnDestroy()
  {
    this.sub.unsubscribe();
  }

}

Answer 1

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

Вы должны посмотреть здесь, чтобы лучше понять, как все это работает: https://angular.io/guide/observables