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

Question

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

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
  }

所以现在我的 await 很有用，但我的问题是代码从未进入我的异步括号内。我是说里面的代码

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，也许我错过了 angular 的某些东西。提前致谢

Answer 1

你的 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 and the afore mentioned How do I return the response from an asynchronous call? 问题。

Promises、async/await 和 observables 都是对同一问题的类似解决方案，但它们的工作方式不同。您的代码目前混合了所有这 3 个。有多种方法可以实现上述目标，但我建议您选择其中一种解决方案并坚持使用，而不是将它们混在一起。将它们混在一起只会让您的代码变得混乱。

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

Async / Await does't hit code inside async {}

asynchronous

async-await

angular

angular7