异步/等待不会在异步{}中命中代码

问题描述

我尝试通过异步/等待数据库加载来实现加载微调器，但无法在异步方法中命中代码。我的数据加载看起来像这样

getServerList(){
    this.http.get('XXXX')
    .map((data : Response) =>{
      return data.json() as MyObject[];
    }).toPromise().then(x => {
      this.serverList = x;
    })
  }

组件内部的功能是

    async () => {

      try {
        await this.serverListService.getServerList()
      }catch{}
    }

对，我有个警告告诉我，我的await关键字没有用，因为没有什么可等待的。所以我决定像这样在我的数据加载中添加一个异步关键字

async getServerList(){
    this.http.get('http://localhost:6875/api/ServerList_Base')
    .map((data : Response) =>{
      return data.json() as ServerListBase[];
    }).toPromise().then(x => {
      return x;
    })
    return this.serverList
  }

所以现在我的等待很有用，但是我的问题是代码从未在异步方括号内击中。我的意思是里面的代码

async () => {}

从未执行过，我也不知道为什么。我试图从构造函数/从ngAfterViewInit的nginit中找到它，但没有任何效果

而且，当我尝试删除此类异步括号时，

 async loadDataFromDB(){

    await this.serverListService.getServerList()
    this.dataSource  = new MatTableDataSource()
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      this.showSpinner = false;
}

在进入第二行“ this.dataSource”之前，它不会等待getServerList（）。我习惯在C＃中使用async / await，也许我错过了一些有关角度的东西。预先感谢

解决方法

您的getServerList应该看起来像这样

getServerList(): Observabe<MyObject[]>{
    return this.http.get('XXXX')
    .pipe(
       map((data : Response) =>{
          return data.json() as MyObject[];
       })
    );
  }

然后您将其消耗掉：

getServerList().subscribe((data: MyObject[]) => {
   
});

我建议您阅读docs on observables on the angular web page和前面提到的How do I return the response from an asynchronous call?问题。

承诺，异步/等待和可观察对象都是针对同一问题的相似解决方案，但它们的工作方式有所不同。您的代码当前混合了所有这三种代码。有多种方法可以实现上述目标，但我建议您选择其中一种解决方案并坚持使用，而不要混淆使用。混淆它们只会使您的代码混乱。

angular angular7 async-await asynchronous

异步/等待不会在异步{}中命中代码

问题描述

解决方法

相关问答