正确使用Angular 5

Question

我已经谷歌搜索了几天，发现了许多不同的场景，关于如何使用Angular 5（或2-3-4，无论如何）使用Async 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并使用async

如前所述，您可以订阅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转换为数据，就像您手动完成一样。