Угловая подписка.Не могу получить данные

Question

ОБНОВЛЕНИЕ Ниже описано, как мне удалось это сделать (прокрутите до моего ответа или перейдите по ссылке): https://stackoverflow.com/a/55013081/1729405

Я пытаюсь создать сервис APIS в Angular 7.Я использую подписку, чтобы передать массив, к которому я не могу получить доступ через другой сервис.

Вот метод обслуживания 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

Вы не получаете данные или данные как нулевые или неопределенные, потому что ваша конечная точка отдыха вернет данные в будущем, но ваш оператор возврата будет возвращен немедленно.

Ниже приведены способы, которые вы можете решить

• использовать 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 pipe.

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

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.
}

Нет способасохранить значение за пределами области затем.Чтобы избежать многократного использования 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

Это происходит потому, что http.post является асинхронным, вы можете сделать его синхронным, сделав getResponse() async, преобразовав Observable в Promise на .toPromise() и добавив await перед http.post с тех пор getResponse() не будет возвращать наблюдаемые, но необработанные данные, поэтому .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);
  }