Angular 8：使用 HttpClient.get.toPromise

Question

我想从服务构造函数异步调用 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/>

然后才（在执行了几个构造函数之后）我得到了数据。

你能告诉我我的代码有什么问题吗？

提前谢谢你，兹维卡

Answer 1

是的，代码运行良好。

因为您的方法 this.ReadConfiguration(); 本质上是异步的，它将运行脱离正常流程并在按预期工作一段时间后执行。

Answer 2

您需要在这一行中放置一个等待：

this.ReadConfiguration ();

像这样：

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

Answer 3

使用构造函数的目的是创建组件和初始化变量

在您的情况下，您正在寻找我们称之为 'HOOK' 作为在构造函数之后执行的 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');
        });

Answer 4

如果你想使用你的读取配置功能，你需要像这样使用它：

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

Answer 5

正如上面 Youssef Tounoussi 所说，将 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();
    // ..
  }

Angular 8：使用 HttpClient.get.toPromise

Angular 8: Using HttpClient.get.toPromise

httpclient

promise

angular