正确使用Angular 5的异步调用

Question

我已经谷歌搜索了几天，发现了许多不同的场景，关于如何使用Angular 5（或2-3-4，无论如何）使用异步API调用。

任何人都可以给我一些正确的例子（一些好的用例）吗？

恩。

• 使用（async - try - catch）进行API调用
• 如何在组件级别“订阅”该调用

谢谢 ！

Answer 1

我会根据我的意见和我的学习方式给你一个asnwer。 所以不要把它当作绝对真理，而是要质疑它！

首先，您应该知道在Typescript中，有两种方法可以进行异步调用： Promises和Observables 。

Promise在ES6中是原生的，Observables是Rx JS的一部分。

但是哪一个使用？

因为我认为，我会告诉你使用Observables ，因为

• 他们可以被阻止
• 他们可以再玩一次
• 他们有很多有用的操作员
• 他们可以处理几个值

所有这一切，Promises都做不到。

进行API调用

导入模块

非常简单：首先，您需要导入负责该模块的模块：

import { HttpClientModule } from '@angular/common/http';
// ...
imports: [HttpClientModule]

这是Angular 5中新的和改进的http服务 。 我强烈建议你使用它，因为较旧的（ Http ）很快就会过时。

使用HttpClient服务

现在，在您的服务中，您可以像这样使用HttpClient

import { HttpClient } from '@angular/common/http';
// ...
constructor(
  private http: HttpClient
) {}
// ...
getAny(): Observable<any> {
  return this.http.get<any>('url'); // request options as second parameter
}

使用商业服务

在您的组件中，您现在可以执行此操作

import { MyService } from '../myservice/myservice.service';
// ..
constructor(private myService: MyService) {
    this.myService.getAny().subscribe(() => {});
}
// ..

补充资料

处理错误或加载器

假设您要显示进度条或处理错误：为此，您必须使用拦截器 。 拦截器是在发送之前（或之后）捕获您的请求的服务，并且会执行某些操作。

这是一个简单的错误拦截器：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ErrorHandlerService implements HttpInterceptor {

  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next
      .handle(req)
      .catch(err => {
        console.log('error occured');
        return Observable.throw(err);
      });
  }
}

要使用它，只需在模块中提供您的价值：

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: ErrorHandlerService, multi: true }
]

我想你猜对了，但你也可以用它来处理进度条;）

订阅Observable并使用异步

如您之前所见，您可以订阅http呼叫。

如果您想处理特定错误并在组件中执行某些逻辑，请按以下步骤操作：

myService.getAny().subscribe(
  responseAfterSuccess => {},
  responseAfterError => {}
);

使用此代码，您将处理成功和错误。

最后， 异步管道 ：异步管道将Observable转换为数据。 要使用它，请执行此操作

this.myVar = myService.getAny();

你的变量myVar将包含一个Observable。 现在，在你的HTML中，用这个

<div *ngFor="let item of myVar | async">{{ item }}</div>

Angular会在显示任何内容之前将数据到达，并将Observable转换为数据，就像您手动完成一样。