使用 GET 请求将数据传递给组件答案

【问题标题】：Passing data to component using GET request使用 GET 请求将数据传递给组件
【发布时间】：2020-05-25 05:03:03
【问题描述】：

每次向组件传递新数据/URL 并使用 NgFor 循环时，如何将在我的服务中检索到的数据传回组件？我想使用 Promise 而不是 observables。

澄清一下：Service(A) 需要在每次数据更改时将其对象传递给 Component(B)，然后使用 NgFor 对其进行循环。提前致谢

这是我的代码：

服务(A)

 receiveEvent(eventId){
   return fetch(eventId).then(res => res.json())
   .then((data:any) => {
     console.log(data);
 });

接收组件（B）

 requestEvent(requestUrl){
  this._clientService.receiveEvent(requestUrl)
  }

【问题讨论】：

我假设您对我上次使用 observables 的回答不满意：stackoverflow.com/a/60139675/5367916。我可以问你为什么不想使用 observables 吗？它们确实非常适合您的用例。
如果您坚持承诺，请从我对您之前问题的回答中获取建议，并使用承诺查找 pub/sub。对于您在这里找到解决方案而言，模式可能比技术更重要。
我一直在努力让它发挥作用，我想尝试一种不同的 promises 方法。 Observables 对我来说是一个很大的学习曲线。
我知道 observables 很难学习。这是它们的一个相当复杂的用法。不过，我建议您了解它们，因为随着您更多地使用 Angular，它们会一直出现。只需创建自己的主题并进行试验，就可以从小处着手。

标签： angular angular-services angular-components get-request

【解决方案1】：

你可以在finally回调中返回一个promise和resolve：

服务

fetch(URL: string): Promise < any > {
    return new Promise(resolve => {
        this.http.get(URL)
            .subscribe(response => {
                console.debug("response = %O", response);
                // set data locally
                this.myVariable = data[0]["myVarible"];
            }, error => {
                console.error(error);
            }, () => {  // finally
                resolve();
            })
    });
}

调用组件构造函数

this.myService.fetch(URL).then(() => {
    console.log(this.myService.myVariable);
});

除非您使用 websockets，否则您必须经常轮询数据库以获取新数据；将调用组件构造函数的 fetch 包装在 setInterval

【讨论】：