angular - Angular 6 中的 HTTP get 调用

Question

我将 Angular 项目更新为 Angular 6，但不知道如何执行 http get 请求。这就是我在 Angular 5 中的做法:

get(chessId: string): Observable<string> {

this.loadingPanelService.text = 'Loading...';
this.loadingPanelService.isLoading = true;

const url = `${this.apiPathService.getbaseUrl()}api/chess/${chessId}/rating`;   

return this.http.get<string>(url)
.catch((error) => {
    console.error('API error: ', error);

    this.loadingPanelService.isLoading = false;
    this.notificationService.showErrorMessage(error.message);

    return Observable.of(null);
  })
  .share()
  .finally(() => {
    this.loadingPanelService.isLoading = false;
  });

这就是我现在的做法。 Angular 6 应该这样做吗？

...
return this.http.get<string>(url)
.pipe(
  catchError(this.handleError),
  share(),
  finalize(() =>{this.loadingPanelService.isLoading = false})
);

private handleError(error: HttpErrorResponse) {
console.error('API error: ', error);

this.loadingPanelService.isLoading = false;
this.notificationService.showErrorMessage(error.message);

// return an observable with a user-facing error message
return throwError(
  'Something bad happened; please try again later.');
};

Answer 1

您在 Angular 6 中调用 http 的方式是正确的。虽然我正在共享代码片段，但请记住，就像我们可以在管道内传递运算符的数量，并且所有返回 Observable 对象。所以您不需要明确将此运算符输出隐藏到 Observable 中。

import { Http, Response } from '@angular/http'
import { throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

.....
 return this.http.get(url)
    .pipe(map((response : Response) => {
        return response.json();   
    }), catchError((error: Response) =>{
        this.loadingPanelService.isLoading = false;
        this.notificationService.showErrorMessage(error.message);
        return throwError('Something went wrong');      
    }), finalize(() => {
        this.loadingPanelService.isLoading = false;
    }));

您也可以使用 HttpClient。如果您想要 httpClient 的答案，请单独发布您的问题。

希望对你有帮助