在页面加载时从可观察对象获取数据的最佳方法？答案

【问题标题】：Best way to get data from observables on page load?在页面加载时从可观察对象获取数据的最佳方法？
【发布时间】：2020-07-22 04:04:33
【问题描述】：

如果我在页面加载时知道我的 api 参数的所有可能值，那么尝试像这样在页面加载时将所有这些值一次加载到地图中会更好吗？构造函数会确保将所有值都设置到地图中吗？

this.apiService.get(possibleQuery) 返回一个 observable。

export class DataService {
  private queryMap: Map<string, string>;
  private possibleQueries = [
    'query1',
    'query2',
    'query3',
    'query4'
  ];

  constructor() {
      this.createQueryMap();
    }

  displayData(query: string) {
    console.log(queryMap.get(query));
  }

  private createQueryMap() {
    this.queryMap = new Map<string, string>();
    for (const possibleQuery of this.possibleQueries) {
      this.apiService.get(possibleQuery)
      .subscribe(result => { this.queryMap.set(possibleQuery, result); });
    }
  }
}

【问题讨论】：

在服务中 subscribe() 是不正确的。它打破了关注点的分离，根据观察者设计模式，这不是一个好的做法。我很乐意提供更多帮助并提出解决方案，但可以详细说明吗？你想达到什么目的？为什么要多次调用apiService？
apiService 不是我可以更改的，而是为字符串请求检索特定的字符串值。在我的页面组件上，我需要根据将字符串查询作为输入的用户操作来显示结果字符串。那么直接从页面组件中为每个用户操作运行 apiService 会更好吗？如果我们必须多次调用，这将意味着进行不必要的 api 调用
现在我知道了 :) 是的，最好按用户操作运行 apiService。看起来它会提出更多请求。但是，反过来想。如果用户只想执行一项操作怎么办？如果您将所有操作组合在一起，您会无缘无故地消耗资源

标签： angular rxjs-observables

【解决方案1】：

我想你想要的是zip。完成后，它将运行所有可观察对象并在订阅中发出一个响应。

关于构造函数“确保[ing]所有值都将设置到地图中？” 构造函数是类中首先运行的东西，但它不会在 API 调用运行时停止其他代码的执行。

如果您在应用程序完成初始化之前需要 API 调用，您需要设置一个APP_INITIALIZER。

【讨论】：

【解决方案2】：

我建议服务尽可能干净。

类似

getByValue(value: string): Observable<string> {
    return this.apiService.get(value)
}

让我详细说明：

假设用户有两个动作

操作 1
动作 2

这些动作可能是不同的 span 元素，例如

<span>Action 1</span> 和 <span>Action 2</span>

如果用户单击任何操作，那么您将调用组件中的方法。说actionClick 方法。所以，span 元素会变成

`<span click="actionClick('action1')">Action 1</span>`

actionClick 方法将从您的服务中调用该方法，并将结果保存在一个可观察变量中，即value$

actionClick(value: string) {
    this.value$ = getByValue(value)
}

然后你必须在模板中显示 value$ 以及 async 管道

<p>
 The result is: {{value$ | async}}
</p>

【讨论】：