订阅调用后的空数组[重复]

Posted 2023-03-13

【中文标题】订阅调用后的空数组[重复]

【英文标题】：Empty Array after subscribe call [duplicate]

【发布时间】：2019-12-01 13:25:19

【问题描述】：

我写了一个服务：

loadroom() : Observable<any[]>
    return this.http.get(this.roomUrl)
        .pipe(
            map((response: any) => 
                let resources = response;
                return resources.map(function(room:any) 
                    return id: room.id, title: room.title, eventcolor: room.eventColor;
                );
            )
        );

然后我在一个组件中使用这个服务

rooms: any[] = [];       
ngOnInit() 
    this.schedulerService.loadroom().subscribe(response => this.rooms = response);
    console.log(this.rooms);

我没有在数组中看到数据。在控制台中我得到一个空数组[]

但是如果我使用

this.schedulerService.loadroom().subscribe(response => console.log(response));

我得到了数据。

【参考方案1】：

这是因为 Observable 是异步的。意思是console.log(this.rooms);发生之前 response => this.rooms=response。

所以正确的使用方法是：

this.schedulerService.loadroom().subscribe(response => 
  this.rooms = response;
  console.log(this.rooms);
); 

【参考方案2】：

订阅是异步的。很可能执行还没有完成：您需要在链式事件中工作以保持此时的流程。您需要与this.rooms 做的任何事情都需要在订阅事件中。

【参考方案3】：

是的，这完全是预期的行为，subscribe是异步的，这意味着调用它不会阻塞代码的执行，它不会在执行下一行之前等待它完成。所以

this.schedulerService.loadroom().subscribe(response => this.rooms=response);
    console.log(this.rooms);

订阅完成前触发日志