Попытка выяснить проблему с асинхронным возвратом наблюдаемого - PullRequest
Новая
       6

Попытка выяснить проблему с асинхронным возвратом наблюдаемого

1 голос
/ 18 октября 2019

По какой-то причине мой .then () дает мне просто наблюдаемое при выходе из консоли, есть ли способ получить данные, которые он возвращает?

Я пробовал несколько разных способовчтобы решить мою проблему с помощью async / await, но я не могу понять, что делать. Прямо сейчас кажется, что моя страница загружается, а затем мои данные просматриваются, что приводит к ошибке в консоли. В конечном итоге данные поступают, но не раньше, чем выдается ошибка.

Это мой компонент ts: 

async getGames() {
    await this.games.getAllGames(this.currentPage).then(game => {
      this.gamesArray = game;
    });
}

Это из моего служебного файла 

async getAllGames(page) {
    console.log('11111111111111');
    const queryParams = `?page=${page}`;
    return await this.http.get(this.url + queryParams);
}

Этомой html 

<div class="col-lg-9 float-right">
    <!-- <div *ngIf='loading'  class="d-flex justify-content-center">
      <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status"></div>
    </div> -->
    <!-- <div *ngIf="!loading"> -->
    <div class="row">
        <div class="col-lg-6 card-background" *ngFor="let game of gamesArray.games">
            <div class="card-surround shadow-sm">
                <div>
                    <h2>{{game.homeTeam.teamName}}</h2>
                    <h2>{{game.awayTeam.teamName}}</h2>
                    <canvas id="{{game.id}}"></canvas>
                    <hr>
                    <p>{{game.gameTime}}</p>
                </div>
            </div>
        </div>
    </div>
    <!-- </div> -->
    <ngb-pagination class="d-flex justify-content-end" 
        size="sm" 
        [collectionSize]="gamesArray.games.length" 
        [(page)]="currentPage"
        [maxSize]="5" 
        [pageSize]='6'                  
        [rotate]="true" 
        [ellipses]="false"
        [boundaryLinks]="true"
        (pageChange)='onPageChange($event)'>
    </ngb-pagination>
</div>

Проблема в том, что игра then () возвращает наблюдаемые, а не данные, которые я ожидаю получить с сервера / базы данных.

Ответы [ 2 ]

2 голосов
/ 18 октября 2019

Согласитесь с @alexortizl, вам просто нужно позвонить toPromise() на getAllGames() возвращаемое значение, и оно будет работать. 

async getAllGames(page) {
      console.log('11111111111111');
      const queryParams = `?page=${page}`;
      return await this.http.get(this.url + queryParams).toPromise(); // <--- like this
    }

Я просто хотел бы добавить, что вы также можете,используйте саму наблюдаемую от вызова this.http.get(...). Вам просто нужно вызвать subscribe вместо then.

Посмотрите на этот стек-блиц-проект, чтобы увидеть, как будет выглядеть код. https://stackblitz.com/edit/angular-j7bh6e?file=src%2Fapp%2Fgame.service.ts

1 голос
/ 18 октября 2019

Проблема в том, что angular http.get() возвращает Observable, поэтому в вашей функции getAllGames() вы говорите:

return await this.http.get(this.url + queryParams);

Вы на самом деле возвращаете Observable вместоPromise. Это должно быть что-то вроде:

return await this.http.get(this.url + queryParams).toPromise();

Также в функции getGames(), если вы используете await, то вам не следует использовать метод обещания then(). Вместо этого должно быть что-то вроде: 

async getGames() {    
    const game = await this.games.getAllGames(this.currentPage);
    this.gamesArray = game;
  }
...