Ioni c 4 http.get.subscribe не сохраняет ценность - PullRequest
Новая
       70

Ioni c 4 http.get.subscribe не сохраняет ценность

0 голосов
/ 06 февраля 2020

Так что это, вероятно, дубликат или что-то в этом роде, но я пока не смог найти ничего простого и понятного, поэтому я просто спрошу.

У меня есть простой код, как показано ниже: 

  fetchData() {
    let dataArray: Array<any> = [,,,];
    this.prepareDataRequest()
    .subscribe(data => {
      this.dataArray[0] = JSON.parse(JSON.stringify(data["results"]));
      this.dataArray[1] = Object.keys(JSON.parse(JSON.stringify(data["results"]))).length;
      console.log(this.dataArray[0]);
    },
    err => {
      this.dataArray[2] = `Error --> Status: ${err.status}, Message: ${err.statusText}`;
    });
    return this.dataArray;
  }

  prepareDataRequest() {
    const dataUrl = 'https://randomuser.me/api/?results=10&inc=gender,name,nat,email,phone,id';
    return this.http.get(dataUrl);
  }

console.log(this.dataArray[0]); работает отлично, но возврат пустой. До сих пор я понял, что это потому, что он выполняет return this.dataArray; до того, как получит элементы.

Но как мне это исправить? Есть ли простой способ сказать «подождите, пока все будет сохранено, прежде чем вернуться»? Или я делаю это совершенно неправильно (вероятно, xD)?

Я пробовал кое-что с asyn c и прочим, но я новичок в этом, так что go не все хорошо.

Ответы [ 2 ]

0 голосов
/ 06 февраля 2020

Вы возвращаете свой результат вне области подписки, поэтому dataArray еще не был инициализирован.

Вам необходимо изменить метод fetchData () следующим образом: 

  fetchData() {
    let dataArray: Array<any> = [, , ,];
    this.prepareDataRequest()
      .subscribe(data => {
          this.dataArray[0] = JSON.parse(JSON.stringify(data["results"]));
          this.dataArray[1] = Object.keys(JSON.parse(JSON.stringify(data["results"]))).length;
          console.log(this.dataArray[0]);
          // return your dataArray here
          return this.dataArray;

        },
        err => {
          this.dataArray[2] = `Error --> Status: ${err.status}, Message: ${err.statusText}`;
        });
  }

Кроме того, я немного запутался в объявлении локальной переменной dataArray, когда вы используете только поле dataArray. Возможно, там не нужно.

0 голосов
/ 06 февраля 2020

Вы делаете это неправильно, вам нужно вернуть наблюдаемое: 

fetchData() {
  return this.prepareDataRequest().pipe(
    pluck('results'),
    catchError(err => `Error --> Status: ${err.status}, Message: ${err.statusText}`),
  );
}

someConsumerFunction() {
  fetchData().pipe(
    // do optional processing here
  ).subscribe(
    results => console.log(results),
    err => console.log(err),
  );
}

или если вы хотите дождаться завершения и использовать asyn c и Promise: 

async fetchData() {
  try {
    const data = await this.prepareDataRequest().pipe(
      first(),
    ).toPromise();

    return data.results;
  } catch (err) {
    return `Error --> Status: ${err.status}, Message: ${err.statusText}`;
  }
}

но первый подход лучше, поскольку у вас больше гибкости в обработке ваших данных на стороне потребителя.

...