Angular 在单独的线程中从后端获取数据答案

【问题标题】：Angular fetch data from back-end in separate threadAngular 在单独的线程中从后端获取数据
【发布时间】：2020-03-25 02:54:22
【问题描述】：

这是场景：在两个页面中：主页和列表数据页面。为了改善用户体验，在主页中，当用户单击按钮时，我必须启动一个单独的线程来获取数据（数据用于列表数据页面）从restful api，当数据被获取时，我想向用户显示一个通知，说数据准备好了，他可以去列表数据页面。由于数据量大，将用户重定向到列表数据页面并等待从后端获取数据是不好的。我使用 angular fir 前端和 springboot 作为后端。注意：我已经使用异步函数实现了一个解决方案。但我需要一个针对所描述场景的解决方案。

【问题讨论】：

javascript 是单线程的。您也许可以使用网络工作者，但听起来问题是您一次获取太多数据并且需要实现分页

标签： angular spring-boot user-experience

【解决方案1】：

在 Angular 中，通常在 JavaScript 中，不要考虑线程。

您所描述的可以使用 Angular 服务和一些 Promises 来实现：

创建一个 Angular 服务 MyService，它将使用 HttpClient 公开方法 getMyData。在该方法内部，使用HttpClient.doGet 获取您想要的数据。获取数据后，将其缓存在此服务中。还返回一个 Promise 以便调用者知道数据何时准备就绪。像这样：

public getMyData() {
    return this.httpClient.doGet("http://example.com/my-endpoint")
               .toPromise()
               .then(data => this.cachedData = data)
}

public getMyCachedData() {
    return this.cachedData;
}

在您的 HomePage 组件中，调用 MyService.getMyData 并使用返回的 Promise 的 then 方法将标志 isDataReady 设置为 true。像这样：

ngOnInit() {
    this.myService.getMyData()
                  .then(data => this.isDataReady = true)
}

在 HomePage 的模板中，每当 isDataReady 设置为 true 时，显示消息告诉用户数据已准备好。此消息应提供指向 ListPage 的链接：

    <a *ngIf="isDataReady" routerLink="/list-page">Data is ready</a>

在 ListPage 中，从服务中检索缓存的数据：

ngOnInit() {
    this.myService.getMyCachedData()
                  .then(data => /* do something with your data */)
}

Angular Guide 中有更多关于使用服务与组件通信的信息。

【讨论】：