如何在 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 声明为可观察的？

Answer 1

请使用管道和

map

运算符进行额外的操作，然后您可以在最后订阅以使动作顺序执行！

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

ngOnInit() {
    console.log('1')
    this.fetchdata().subscribe((data) => {
        this.httpdata = data;
        console.log('4')
    });
}