Angular 8: Использование HttpClient.get.toPromise - PullRequest
0 голосов
/ 21 октября 2019

Из конструктора службы я хочу вызвать 2 HttpClient.get асинхронно. Когда конструктор завершен, 2 запроса get должны быть уже выполнены.

public async ReadConfiguration () 
  {
      await this.http.get ('http://localhost:80/api/Target.xml',{ responseType: 'text' })
        .toPromise()
        .then(res => console.log(res))
        .catch(err => { console.log ('error');
        });

      console.log ('line 25');

      await this.http.get ('http://localhost:80/api/Target.xml',{ responseType: 'text' })
        .toPromise()
        .then(res => console.log(res))
        .catch(err => { console.log ('error');
        });

      console.log ('line 32');
  }

  /*************************************************************************************/
  constructor(private http: HttpClient) {
    console.log ('-->constructor');
    this.ReadConfiguration ();
    console.log ('Done');
    console.log ('<--constructor');

  }

На консоли я получил:

-->constructor <br/>
Done <br/>
<--constructor <br/>

и только тогда (после выполнения нескольких конструкторов) я получил данные.

Подскажите, пожалуйста, что не так в моем коде?

Заранее спасибо, Звика

Ответы [ 5 ]

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

Цель использования конструктора - создать компонент и инициировать переменные

В вашем случае вы ищете то, что мы назвали «HOOK» как ngOnInit, который выполняется после Конструктора.

Пожалуйста, посмотрите на это: Разница между Конструктором и ngOnInit

И Для Синхронности, которая может зависеть от времени отклика вашего API, я предлагаю вам сделать два вызова каквложенный вызов, я имею в виду один может быть внутри другого, как показано ниже:

await this.http.get ('http://localhost:80/api/Target.xml',{ responseType: 'text' })
        .toPromise()
        .then(res => {

 await this.http.get ('http://localhost:80/api/Target.xml',{ responseType: 'text' })
        .toPromise()
        .then(res => console.log(res))
        .catch(err => { console.log ('error');
        });

})
        .catch(err => { console.log ('error');
        });
0 голосов
/ 21 октября 2019

Как сказал выше Юсеф Туноусси, введите ReadConfiguration вызов async ngOnInit(). Кроме того, чтобы избежать вложенных обещаний, вы можете изменить порядок вызовов, как показано ниже:

public async ReadConfiguration()
  {
    let res: string; 
    try
    {
      // 1st call
      res = await this.http.get('http://localhost:80/api/Target.xml', { responseType: 'text' }).toPromise();
      console.log(res);

      // 2nd call
      res = await this.http.get('http://localhost:80/api/Target.xml', { responseType: 'text' }).toPromise();
      console.log(res);

    } catch (error)
    {
      console.error(error);
    }
  }

  async ngOnInit()
  {
    // ...
    await this.ReadConfiguration();
    // ..
  }
0 голосов
/ 21 октября 2019

если вы хотите использовать функцию чтения конфигурации, вам нужно использовать ее следующим образом:

    constructor(private http: HttpClient) {
       console.log ('-->constructor');
       this.ReadConfiguration().then(data => {
       console.log('done')
       console.log ('<--constructor');
       });
    }

и ваша функция может выглядеть примерно так:

public async ReadConfiguration () 
  {
      await this.http.get ('http://localhost:80/api/Target.xml',{ responseType: 'text' })
        .toPromise()
        .then(res => console.log(res))
        .catch(err => { console.log ('error');
        });

      console.log ('line 25');

      await this.http.get ('http://localhost:80/api/Target.xml',{ responseType: 'text' })
        .toPromise()
        .then(res => console.log(res))
        .catch(err => { console.log ('error');
        });

      console.log ('line 32');
    Promise.reslove();
  }
0 голосов
/ 21 октября 2019

Вам нужно поставить в этой строке ожидание:

this.ReadConfiguration ();

Как это:

constructor(private http: HttpClient) {
   console.log ('-->constructor');
   await this.ReadConfiguration ();
   console.log ('Done');
   console.log ('<--constructor');
}
0 голосов
/ 21 октября 2019

Да, код работает нормально.

Поскольку ваш метод this.ReadConfiguration(); является асинхронным по своей природе, он выйдет из нормального потока и выполнится через некоторое время, которое работает как положено.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...