如何在Angular中顺序执行回调

Question

如何强制Angular在ngOnInit中等待获取数据完全完成后再恢复执行:

fetchdata() {
console.log('2')

this.http.get("http://jsonplaceholder.typicode.com/users").subscribe(
(data) => {
console.log('3')
return data
})
}
ngOnInit() {
console.log('1')
this.httpdata = this.fetchdata()
console.log('4')
}

在上例中，console.log的顺序为1,2,4,3

我知道httpclient的get函数是异步的，但我怎么能让我的函数fetchdata异步?

只是将函数声明为async，使console.log保持相同的顺序，并抛出执行时间错误:

async fetchdata() {
console.log('2')
this.http.get("http://jsonplaceholder.typicode.com/users").subscribe(
(data) => {
console.log('3')
return data
})
}

如何将fetchdata函数声明为observable?

Answer 1

实现此目的的一种方法是订阅该方法。

ngOnInit() {
console.log('1')
this.fetchdata().subscribe({
next: (data: string) => { 
this.httpdata = data;
console.log('4')},
error: (error) => { }
});
}

注意:这是一个API调用场景，你期望从服务器得到一个ok或一个错误。

Answer 2

请使用管道和map操作符执行附加操作，然后您可以在最后订阅以使操作顺序执行!

fetchdata() {
console.log('2')

return this.http.get("http://jsonplaceholder.typicode.com/users");
}
ngOnInit() {
console.log('1')
this.fetchdata().subscribe((data) => {
this.httpdata = data;
console.log('4')
});
}