Question

我想异步使用我的API。我从API获取了一些数据，因此需要显示它们。

这里有个例子：

home.ts

async ngOnInit()
{
    console.log("NgInit 01");
    this.data = await this.api.getMe();
    console.log("NgInit 02");
    this.canDisplayData = true;
}

home.html

<div *ngif="canDisplayData">
   myData : {{ data }}
</div>

service_api.ts

async getMe() {
    let result: any;

    await this.http.get('http://dummy.restapiexample.com/api/v1/employees')
        .toPromise()
        .then(res => { result = res; })
        .catch(error => { console.log(error); });

    return result;
  }

这行得通，但我并不为此感到骄傲。我确定我可以做得更好。不使用async和await。

谢谢您教我的生活，角/离子：D

Answer 1

async / awit仅在promise上工作，因此您需要将observable转换为promise

service_api.ts

getMe() {
    return this.http.get('http://dummy.restapiexample.com/api/v1/employees')
  }

home.ts

async ngOnInit()
{
    console.log("NgInit 01");
    this.data = await this.api.getMe().toPromise();
    console.log("NgInit 02");
    this.canDisplayData = true;
}

另一种方法是使用异步管道

async / awit仅在promise上工作，因此您需要将observable转换为promise

service_api.ts

getMe() {
    return this.http.get('http://dummy.restapiexample.com/api/v1/employees');
  }

home.ts

ngOnInit()
{
    console.log("NgInit 01");
    this.data$ = this.api.getMe();
    console.log("NgInit 02");
}

模板

<div >
   myData : {{ data$ | async}}
</div>

Answer 2

当我们可以观察和订阅rxJs时，我个人不建议使用async和angular进行等待，只需像这样转换您的代码，并保存额外的变量-

ngOnInit() {
  this.api.getMe()
    .subscribe(res => {
      this.data = res;
    },
    error => {
      console.log(error);
    });
}

<div>
   myData : {{ data }}
</div>

getMe() {    
    return this.http.get('http://dummy.restapiexample.com/api/v1/employees')
      .map(res => {
        return res;
      });
  }

Answer 3

您可以选择以下一项，异步并等待可能会使您的应用变慢。

Home.ts

 ngOnInit()
        {
            this.api.getMe().subscribe((data)=>{
               this.canDisplayData = true;
               this.data = data;
            }, (err) => {
               console.log(err);
            });
        }

Home.html

<div *ngif="canDisplayData">
   myData : {{ data }}
</div>

service_api.ts

getMe() {
    return this.http.get('http://dummy.restapiexample.com/api/v1/employees');
  }

将API与Angular Async结合使用的最佳方法

3 个答案: