So verwenden Sie async/erwarten in Typoskript

Question

Ich möchte eine http.get Methode aus meinem ThemeService aufrufen und es so "synchron" wie möglich machen, so dass es fortlaufend, nachdem es Theme aus dem Anruf erhält. Ich suchte, wie man das macht und stolperte über async und await. Ich habe versucht, dies zu implementieren, aber es hat nicht ganz funktioniert. Ich habe console.log() in den Code geschrieben, damit ich sehen kann, was ist und was nicht ausgeführt wird. Die "IN ASYNC FUNCTION" und "AFTER ASYNC" werden ausgeführt, aber nicht die nach/in meinem Anruf unter ThemeService.

Da ich neu bin zu den async/await Funktionen in Typoskript Ich weiß nicht, ob was ich geschrieben habe, ist schlecht oder wenn was ich versuche zu tun ist möglich oder nicht.

ngOnInit():void{ 
    let id = +this.routeParams.get('themeId'); 
    async function getTheme(){ 
     console.log("IN ASYNC FUNCTION"); 
     var val = await this.themeService.getTheme(id).subscribe((theme:Theme)=> { 
      this.theme = theme; 
      console.log("IN AWAIT FUNCTION") 
     }); 
     console.log("AFTER AWAIT"); 
     return val; 
    } 

    getTheme(); 
    console.log("AFTER ASYNC"); 
} 

Answer 1

Sie können es so haben (beachten Sie Nutzung von 'nehmen (1) .toPromise()'):

ngOnInit():void 
{ 
    let id = +this.routeParams.get('themeId'); 
    async function getTheme() 
    { 
     console.log("IN ASYNC FUNCTION"); 
     var val = await this.themeService.getTheme(id).take(1).toPromise(); 
     console.log("AFTER AWAIT"); 
     return val; 
    } 

    this.theme = await getTheme(); 
    console.log("AFTER ASYNC"); 
} 

Oder etwas kürzer:

class MyComponent implements OnInit 
{ 
    async ngOnInit() 
    { 
     let id = +this.routeParams.get('themeId'); 
     this.theme = await this.themeService.getTheme(id).take(1).toPromise(); 
     console.log("AFTER ASYNC"); 
    } 
} 

Hope Diese hilft.