1
votes

Angular 8: Utilisation de HttpClient.get.toPromise

Depuis un constructeur de service, je souhaite appeler 2 HttpClient.get de manière asynchrone. Lorsque le constructeur est terminé, les 2 requêtes get doivent être déjà terminées.

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

Sur la console, j'ai obtenu:

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');

  }

et alors seulement (après l'exécution de quelques constructeurs) j'ai obtenu les données.

Pouvez-vous nous dire ce qui ne va pas dans mon code?

Merci d'avance, Zvika

angular httpclient promise

2 commentaires

Pouvez-vous me dire ce que vous voulez réaliser? comme le code fonctionne bien, pour une explication, lisez ma réponse ci-dessous.

Vous ne pouvez pas utiliser async / await sur le constructeur. Vous ne pouvez utiliser que des promesses.

5 Réponses :

0
votes

Oui, le code fonctionne correctement.

Parce que votre méthode this.ReadConfiguration (); est de nature asynchrone, et elle sortira du flux normal et s'exécutera après un certain temps qui fonctionne comme prévu.

0 commentaires

-1
votes

Vous devez mettre une attente dans cette ligne:

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

Comme ceci:

this.ReadConfiguration ();

1 commentaires

vous ne pouvez pas utiliser async await sur les constructeurs.

3
votes

Le but de l'utilisation du constructeur est de créer le composant et d'initier les variables

Dans votre cas, vous recherchez ce que nous avons appelé un 'HOOK' comme ngOnInit qui est exécuté après le constructeur.

Veuillez regarder ceci: Différence entre Constructor et ngOnInit

Et pour la Synchronicité qui peut dépendre du temps de réponse de votre API, je vous suggère de faire les deux appels comme un appel imbriqué, je veux dire que l'un peut être à l'intérieur de l'autre comme ci-dessous:

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');
        });

1 commentaires

Salut Youssef. Appeler ma ReadConfiguration à partir de ngOnInit est une excellente idée. Merci beaucoup !

0
votes

si vous voulez utiliser votre fonction readconfiguration, vous devrez l'utiliser comme ceci:

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();
  }

et votre fonction peut-être quelque chose comme ceci:

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

0 commentaires

0
votes

Comme Youssef Tounoussi l'a indiqué ci-dessus, placez l'appel ReadConfiguration dans async ngOnInit () . De plus, pour éviter les réponses de promesse imbriquées, vous pouvez réorganiser les appels comme indiqué ci-dessous:

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 commentaires