Angular 6 中的 HTTP 获取调用 [英] HTTP get call in Angular 6

问题描述

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

get(chessId: string): Observable{this.loadingPanelService.text = '加载中...';this.loadingPanelService.isLoading = true;const url = `${this.apiPathService.getbaseUrl()}api/chess/${chessId}/rating`;返回 this.http.get(url).catch((错误) => {console.error('API 错误:', 错误);this.loadingPanelService.isLoading = false;this.notificationService.showErrorMessage(error.message);返回 Observable.of(null);}).分享().finally(() => {this.loadingPanelService.isLoading = false;});

这就是我现在的做法.在 Angular 6 中应该这样做吗?

<预><代码>...返回 this.http.get(url).管道(catchError(this.handleError),分享()，finalize(() =>{this.loadingPanelService.isLoading = false}));私人句柄错误(错误:HttpErrorResponse){console.error('API 错误:', 错误);this.loadingPanelService.isLoading = false;this.notificationService.showErrorMessage(error.message);//返回一个带有面向用户的错误消息的 observable返回抛出错误('发生了不好的事情；请稍后再试.');};

解决方案

您在 angular 6 中调用 http 的方式是正确的.虽然我正在共享代码片段，但请记住，我们可以在管道内传递运算符的数量并且都返回 Observable 对象.所以你不需要显式地把这个操作符的输出转换成 Observable.

import { Http, Response } from '@angular/http'从 'rxjs' 导入 { throwError };从'rxjs/operators'导入{地图，catchError}；.....返回 this.http.get(url).pipe(map((response : Response) => {返回 response.json();}), catchError((error: Response) =>{this.loadingPanelService.isLoading = false;this.notificationService.showErrorMessage(error.message);return throwError('出了点问题');}), finalize(() => {this.loadingPanelService.isLoading = false;}));

您也可以使用 HttpClient.如果您想为 httpClient 提供答案，请单独发布您的问题.

希望对你有帮助

I updated my Angular project to Angular 6 and don't know how to do http get requests. Thats how I did it in 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;
  });

And this is how I'm doing it now. Is that how it is supposed to be done in 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.');
};

解决方案

The way you are calling http in angular 6 is correct.Though i'm sharing code snippet, just keep in mind like we can pass number of operators inside pipe and all returns Observable object.So you don't need to explicitly covert this operator output into 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;
    }));

You can also use HttpClient.if you want answer for httpClient then please post your question seperatly.

Hope this will help you

这篇关于Angular 6 中的 HTTP 获取调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！