使用API和Angular Async的最佳方式

Question

我想异步使用我的API。我从我的API得到一些数据，我需要显示它们。

这里有一个例子：

主页.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;
}

这很有效，但我一点也不自豪。我相信我能做得更好。不使用CCD_ 1和CCD_。

感谢你教会我生活，的角度/离子:D

Answer 1

async/ait只在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/ait只在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");
}

tenplate

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

Answer 2

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

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

您可以使用下面的一个，异步和等待会降低应用程序的速度。

主页.ts

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

主页.html

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

service_api.ts

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