использовать подписку () асинхронно

Question

определение функции

resetComponent(){
  console.log("1st");
  ...
  this.background = { };
  this.uploadMode = false;
  this.service.getItem(this.watch.appId, true).subscribe((watch) => {
    this.background = { ... };
    console.log("2nd");
  }, ()=> {});
}

мой код

console.log("before resetComponent()");
resetComponent();
console.log("after resetComponent()");

Не работает с асинхронным.

Мне бы хотелось, чтобы консоль была такой

before resetComponent()
1st
2nd
after resetComponent()

Я не до конца понимаю async.

Как мне достичь своей цели?

Answer 1

Как только вы позвоните subscribe () , ваш код продолжит выполняться, а ваша подписка будет выполняться асинхронно .

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

resetComponent() {
    console.log("1st");
    this.background = {};
    this.uploadMode = false;
    return this.service.getItem(this.watch.appId, true).pipe((watch) => {
            this.background = { ... };
            console.log("2nd");
        }, () => { });
    }

Затем позвоните, используя подписку.

console.log("before resetComponent()");
resetComponent().subscribe(() => {
     console.log("after resetComponent()");  
});

Answer 2

Возможно, вы захотите просмотреть это видео об асинхронном JavaScript от Traversy Media , чтобы лучше понять, что такое асинхронность в браузерах.

Это в основном означаетспособ работы браузера, не дожидаясь чего-то, что может занять некоторое время (например, сетевой запрос события DOM или вызов метода setTimeout).

Теперь браузеры являются однопоточными, поэтому они используют так называемый цикл обработки событий для выполнения асинхронности. Если вам интересно понять, что такое циклы событий, поговорим о цикле событий Филиппа Робертса здесь .

Теперь, когда мына той же странице ( в надежде, что вы смотрели вышеуказанные видео:) ), вы можете в основном вернуть Observable из метода resetComponent(), а затем внутри subscribe вы можетевойдите after resetComponent() в консоль.

Поскольку вы не выполняете никаких преобразований с ответом внутри метода resetComponent(), для достижения этого вы можете использоватьtap оператор. А затем верните Observable вместе с ним.

И затем вы можете subscribe в Observable, возвращаемом методом resetComponent(). Вот как это будет выглядеть в коде:

import { Component } from "@angular/core";
import { DataService } from "./data.service";
import { tap } from "rxjs/operators";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  background;
  uploadMode;
  watch = { appId: "something" };

  constructor(private service: DataService) {}

  ngOnInit() {
    console.log("before resetComponent()");
    this.resetComponent().subscribe(res =>
      console.log("after resetComponent()")
    );
  }

  resetComponent() {
    console.log("1st");
    this.background = {};
    this.uploadMode = false;
    return this.service.getItem(this.watch.appId, true).pipe(
      tap(watch => {
        this.background = { watch };
        console.log("2nd");
      })
    );
  }
}

---

Вот Рабочий пример для вашей ссылки.