Angular 应用程序 Web 服务 http 得到响应太晚了答案

【问题标题】：angular app web service http get response too lateAngular 应用程序 Web 服务 http 得到响应太晚了
【发布时间】：2020-01-06 00:51:25
【问题描述】：

我在 win32 x64 上有 Angular CLI：8.3.2，节点：10.16.3。我正在.net 后端尝试这个有角度的前端。前端有一个 web 服务来 http.get 来自后端 api 的消息列表，它工作正常，然后前端会在浏览器中列出消息。

下面是WebService服务组件的getMessage函数：

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

下面是调用webService获取消息的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 构造函数中调用它，它似乎实际上只在构造函数 AFTER 中进行检索，因此，呈现的页面没有要列出的消息。我试过在没有async/await 的情况下调用getMessage，仍然是相同的行为。那么如何确保它在没有延迟的情况下检索消息呢？

【问题讨论】：

你不需要 `async/await `，它什么也没做。

标签： angular typescript http-get

【解决方案1】：

我经常让服务返回 observable。像这样：

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

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

【讨论】：

【解决方案2】：

从服务函数返回 observable。

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)
        );
    }
}

【讨论】：