Angle8에서 http 서비스를 캡슐화하는 방법

이 글에서는 http 서비스를 캡슐화하는 angular8 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

관련 추천: "angular Tutorial"

HttpClientModule

Angular에서 http 서비스를 사용하려면 먼저 app.module.ts에서 HttpClientModule을 가져와야 합니다. > 모듈, 그렇지 않으면 오류가 보고됩니다. app.module.ts里导入HttpClientModule模块，不然会报错。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
// 导入关键模块
import { HttpClientModule } from '@angular/common/http';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

封装http

根据angular的官网，请求返回的是数据的 Observable 对象，所以组件要订阅（subscribe） 该方法的返回值。

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  private http: any;

  constructor(private Http: HttpClient) {
    this.http = Http;
  }

  // get方法
  public get(url: string, options?: Object, params?: Object): Observable<{}> {
    let httpParams = new HttpParams();
    if (params) {
      for (const key in params) {
        if (params[key] === false || params[key]) {
          httpParams = httpParams.set(key, params[key]);
        }
      }
    }
    return this.http.get(url, { headers: options, params: httpParams }).pipe(catchError(this.handleError));
  }
  
  // post方法
  public post(url: string, body: any = null, options?: Object): Observable<{}> {
    return this.http.post(url, body, options).pipe(catchError(this.handleError));
  }

  // post表单
  public postForm(url: string, body: any = null, options?: Object): Observable<{}> {
    let httpParams = new HttpParams();
    if (body) {
      for (const key in body) {
        if (body[key] === false || body[key]) {
          httpParams = httpParams.set(key, body[key]);
        }
      }
    }
    return this.http.post(url, httpParams, options).pipe(catchError(this.handleError));
  }

  /**
   * 处理请求失败的错误
   * @param error HttpErrorResponse
   */
  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred:', error.error.message);
    } else {
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    console.log(error);
    return throwError(error.error);
  }
}

这里贴上get、post两种的方式的例子，其他如delete这些就不展示了，一样的原理。

细节

稍微说一下里面的细节：

return this.http.post(url, httpParams, options).pipe(catchError(this.handleError));

这里返回的是Observable<{}> ，并通过pipe管道处理请求异常，异常的处理在最下面的handleError 方法里。

使用

// 引入封装好的http服务
constructor(private http: HttpService) { }

/**
   * 测试get方法
   * @param successCallback 成功的回调
   * @param failCallback 失败的回调
   */
public testGet(url: string, successCallback?: Function, failCallback?: Function) {
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json; charset=UTF-8'
    })
  };

  this.http.get(url, httpOptions.headers).subscribe(
    (res: any) => {
      successCallback(res); // 成功走sucessCallback
    }, (err: HttpErrorResponse) => {
      failCallback(err);         // 失败
    }
  );
}

这是一个具体的get请求service，testGet定义里三个参数，一个是请求地址，还有成功的回调与失败的回掉。
subscribe订阅observable 对象。

在component里使用

this.testService.testGet('url', (res:any) => {}, (err:any) =>{});

总结

angular封装http请求并不难，官网也讲得比较清楚。

个人认为最重要的还是这种封装服务的思想，而angular为什么要区别组件服务？

一个重要的原因就是它希望，数据展示逻辑 与 数据访问逻辑rrreee

는 http

🎜을 캡슐화합니다. Angle의 공식 웹사이트에 따르면 요청은 데이터의 Observable 개체를 반환하므로 구성 요소는 반환 값을 🎜subscribe🎜해야 합니다. 이 방법. 🎜rrreee🎜 다음은 get 및 post 두 가지 방법의 예입니다. 삭제와 같은 다른 방법은 표시되지 않습니다. 🎜🎜🎜Details🎜🎜🎜🎜 세부 사항에 대해 잠시 이야기해 보겠습니다. 🎜🎜return this.http.post(url, httpParams, options).pipe(catchError(this.handleError));🎜🎜여기서 반환되는 것은 Observable<{}>이며, 요청 예외는 handleError 메서드에서 처리됩니다. 하단에. 🎜🎜🎜사용 🎜🎜rrreee🎜이것은 특정 가져오기 요청 서비스입니다. testGet 정의에는 세 가지 매개변수가 있으며, 하나는 요청 주소이고, 성공한 콜백과 실패한 콜백이 있습니다.
subscribe는 관찰 가능한 객체를 구독합니다. 🎜🎜🎜사용 🎜🎜this.testService.testGet('url', (res:any) => {}, (err:any) =>{});🎜 🎜🎜Summary🎜🎜🎜 http 요청의 Angular encapsulation은 어렵지 않으며, 공식 홈페이지에도 명확하게 설명되어 있습니다. 🎜🎜개인적으로 가장 중요한 것은 ​​서비스 캡슐화라는 아이디어라고 생각합니다. Angular가 컴포넌트 서비스를 차별화하는 이유는 무엇인가요? 🎜🎜중요한 이유는 데이터 표시 로직과 데이터 액세스 로직을 분리하여 구성 요소가 페이지에 표시해야 하는 데이터를 특정 서비스를 받으러 가세요! 이는 높은 코드 재사용을 가능하게 합니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 Angle8에서 http 서비스를 캡슐화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!