角度应用程序 Web 服务 HTTP 获取响应太晚

Question

我在win32 x64上有Angular CLI：8.3.2，节点：10.16.3。我正在 .net 后端上尝试这个棱角分明的前端。前端有一个 Web 服务，用于 http.get 来自后端 API 的消息列表，该列表工作正常，然后前端将在浏览器中列出消息。

下面是 Web 服务服务组件的getMessage功能：

public async getMessage() {
await this.http.get<Message[]>(this.BASE_URL + '/Messages').subscribe(
result => {
if (result) {
this.updateCollection(result);
}
},
error => console.error(error)
);
}

下面是调用 Web 服务以获取消息的MessagesComponent：

export class MessagesComponent {
constructor(private webService: WebService) { 
console.log("messages has " + webService.messages.length + "entries");
webService.getMessage();
console.log("messages has " + webService.messages.length + "entries");
}
}

这两个函数都运行没有错误，并且 Web 服务getMessages函数工作正常，因为它可以检索所有消息，问题在于getMessages函数的后期调用。尽管它在MessagesComponent构造函数中被调用，但它似乎只在构造函数之后进行检索，因此，呈现页面时没有要列出的消息。我已经尝试getMessage没有async/await的通话，仍然是相同的行为。那么如何确保它检索消息而没有延迟呢？

Answer 1

从服务函数返回可观察的。

public getMessage() {
return this.http.get<Message[]>(this.BASE_URL + '/Messages')
.pipe(
tap(val => this.updateCollection(result)),
);
}

在构造函数内部调用函数的状态下，一个好的做法是在 ngOnInit 内部调用。

export class MessagesComponent implements OnInit {
constructor(private webService: WebService) {}
ngOnInit(){
this.webService.getMessage()
.subscribe(
result => {
// do something
},
error => console.error(error)
);
}
}

Answer 2

我经常让服务返回可观察量。喜欢这个：

export class MessagesComponent {
messages:Message[];
constructor(private webService: WebService) { 
webService.getMessage().subscribe(messages=>{
this.messages = messages;
});
}
}

但最后你应该把它放在onInit方法中