将 API 与 Angular Async 一起使用的最佳方式答案

【问题标题】：Best way to use API with Angular Async将 API 与 Angular Async 一起使用的最佳方式
【发布时间】：2018-12-11 20:18:10
【问题描述】：

我想异步使用我的 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

【问题讨论】：

尝试使用 observable / subscribe

标签： angular api ionic-framework

【解决方案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>

【讨论】：

超级小注意，我不会再叫它this.data，而是更像this.dataPromise。您可能会这样做，但阅读本文的人可能需要注意。（我之前没有投反对票）
@misha130 我不明白你的意思我的回答有什么问题，所以我可以编辑
this.dataPromise = this.api.getMe(); {{ 数据承诺 | async }}
我建议学习可观察的力量，而不是转换为承诺。
@ShamPooSham 我从不使用 toPromise 因为我不使用 async/awit ?

【解决方案2】：

当我们有 rxJs 的 observable 和订阅时，我个人不建议使用 async 和 await ，只需像这样转换您的代码也可以节省额外的变量 -

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

【讨论】：

1) let result: any in getMe() 不再需要。 2) 在 Angular 6+ 中，您需要在 observable 上使用 pipe 并在其中使用运算符 map。
@misha130 HttpClient 会自行完成，无需退订。
@misha130 完全同意你的观点，因为我只复制了问题部分，所以忘了添加取消订阅，我还假设 OP 使用的是 httpModule 而不是 httpClient。
@PardeepJain 你使用的是旧的 rxjs 语法，看看这里的例子：learnrxjs.io/operators/transformation/map.html
@misha130 没错，我对 ionic 不熟悉。当然，这不是一个坏点

【解决方案3】：

您可以使用以下一个，async 和 await 会减慢您的应用程序。

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

【讨论】：