ホームページ >ウェブフロントエンド >jsチュートリアル >angular8でhttpサービスをカプセル化する方法
この記事では、http サービスをカプセル化する angular8 方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
関連する推奨事項: 「angular チュートリアル 」
Angular で http サービスを使用するには、まず
HttpClientModule
モジュールをapp.module.ts
にインポートする必要があります。そうしないと、エラーが報告されます。
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 { }
angular の公式 Web サイトによると、リクエストはデータの
Observable
オブジェクトを返します。したがって、コンポーネントは Subscribe(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<{}>
であり、リクエスト例外はパイプ パイプラインを通じて処理されます。 . 例外 処理は下部の 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); // 失败 } ); }
これは特定の取得リクエスト サービスです。testGet
定義には 3 つのパラメータがあります。1 つはリクエスト アドレス、もう 1 つはリクエスト アドレスです。成功コールバックと失敗コールバック。
subscribe は、監視可能なオブジェクトをサブスクライブします。
コンポーネントで使用する
this.testService.testGet('url', (res:any) => {}, (err:any) => ; {});
http リクエストの Angular カプセル化は難しくなく、公式 Web サイトでもわかりやすく説明されています。
個人的に、最も重要なことはサービスをカプセル化するという考え方だと思います。なぜ Angular はコンポーネント サービスを区別するのでしょうか?
データ表示ロジックと
データアクセスロジックが分離され、コンポーネントがページ上に表示する必要があるデータが委任されることを望んでいることです。とあるサービスを受けよう!これにより、コードの高度な再利用が可能になります。
プログラミング ビデオをご覧ください。 !
以上がangular8でhttpサービスをカプセル化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。