正确使用Angular 5的异步调用

我会根据我的意见和我的学习方式给你一个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转换为数据,就像您手动完成一样.