角订阅。无法获取数据

Question

更新 我是如何做到的如下（滚动到我的答案或这里的链接）： https://stackoverflow.com/a/55013081/1729405

我正在尝试在 Angular 7 中构建 APIService。我正在使用订阅推送到无法通过其他服务访问的数组。

api服务方法如下：

  getResponse(url):Observable<any> {
    return this.http.post(url, '', {responseType: 'text'});
  }

  getAll() {
      this.getResponse(this.todayApiUrl).subscribe(
        (response) => {
          this.data.push(response);
        });

      return this.data;
  }

这是我尝试在辅助服务中调用它的方式：

export class AdsHealthService {
  today = this.callResponseApiService.getAll();


  constructor(private callResponseApiService: CallResponseApiService) { }

  getHealthValue(interval, type) {
    let obj = this.today;
    console.log(obj);
  }
}

在我console.log() 回复时得到的图片。它看起来像一个数组，但是当我尝试访问第一个元素时，我收到了 undefined 消息。我究竟做错了什么？？

Answer 1

发生这种情况是因为 http.post 是异步的，您可以通过使 getResponse() async 使其同步，将 Observable 转换为 Promise 通过 .toPromise() 并在 await 之前添加 @987654328 @ 因为 getResponse() 不会返回 Observable 而是原始数据，所以 .subscribe() 不再需要。

  async getResponse(url) {
    return await this.http.post(url, '', {responseType: 'text'}).toPromise();
  }

  async getAll() {
    this.data = await this.getResponse('some url');
    return this.data
  }
  async some() {
    const data = await this.getAll();
    console.log(data);
    console.log(this.data);
  }

Answer 2

在您的服务中，您需要以下内容：

  async getResponse(url) {
    return await this.http.post(url, '', {responseType: 'text'}).toPromise();
  }

  async getAll(url) {
    return await this.getResponse(url);
  }

在另一个服务/组件中，您可以像下面这样检索承诺。为了确保你得到一个承诺，你需要使用一个 try catch 块。

  async getToday() {
    try {
      let today = await this.yourServiceName.getAll(this.todayApiUrl);
      return today;
    } catch(e) {
        console.log(e);
    }
  }

然后调用：

let data = this.yourServiceName.getToday();
this.data.then((res) => {
// do stuff with 'res' here.
}

没有办法将值保存在 then 范围之外。为了避免多次访问 API，我设置了一个缓存服务，以便您可以在必要时从缓存中存储/检索。这是我引用的缓存文章的链接：https://hackernoon.com/angular-simple-in-memory-cache-service-on-the-ui-with-rxjs-77f167387e39

您可以这样做：

  if (!this.cacheService.has('some key')) {
    let data = this.yourServiceName.init();
    this.cacheService.set('some key', data)
  } else {
    let cache = this.cacheService.get('data');
    // do stuff here.
  }

希望有帮助！

Answer 3

您没有获取数据或数据为 null 或未定义，因为您的休息端点将来会返回数据，但您的 return 语句会立即返回。

以下是解决此问题的方法

• 在模板中使用async管道，在服务中使用.map
• 使用map 在组件中准备就绪时获取数据

下面是代码

  // one method is fine to return data from rest endpoint
  getAll(url):Observable<any> {
     return this.http.post(url, '', {responseType: 'text'});
   }

在你的组件类中

export class AdsHealthService {

  constructor(private callResponseApiService: CallResponseApiService) {
     this.callResponseApiService.getAll().subscribe( (today) => {
       let obj = today;
       console.log(obj);
     });
  }

 rawdata = this.callResponseApiService.getAll();


}

如果您直接在模板中显示数据，您可以使用async 管道来做到这一点。

<div>{{rawdata | async}}</div>

Answer 4

你可以这样做：

在您的应用组件中：

public getDataFromService() {
  this._api.getData(this);
}


public setData(data: any){
 this.data=data;
}

在您的 service.ts 中：

public getData(obj: appComponentModel){
    this.http.get(url).subscribe(res => obj.setData(res));
}

它的格式与您的问题不完全相同，但任何人都很容易理解。