Cet article vous présentera la méthode angulaire8 d'encapsulation des services http. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
Recommandations associées : "Tutoriel angulaire"
Pour utiliser le service http en angulaire, vous devez d'abord importer le module
app.module.ts
dansHttpClientModule
, sinon une erreur sera signalée.
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 { }
Selon le site officiel d'Angular, la requête renvoie un
Observable
objet de données, le composant a donc besoin à s'abonner (s'abonner) La valeur de retour de cette méthode.
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); } }
Voici des exemples des get、post
deux méthodes. D'autres comme delete ne seront pas affichées. Le principe est le même.
Parlons des détails :
return this.http.post(url, httpParams, options).pipe(catchError(this.handleError));
Retourné ici Il est Observable<{}>
et gère les exceptions de demande via le tube. La gestion des exceptions se trouve dans la méthode handleError
inférieure.
// 引入封装好的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); // 失败 } ); }
Il s'agit d'un service de demande d'obtention spécifique. Il y a trois paramètres dans la définition testGet
, l'un est l'adresse de la demande et il y a des rappels de réussite. et l'échec revient.
subscribe s'abonne à l'objet observable.
Utilisation de
this.testService.testGet('url', (res:any) => {}, (err:any) =>{});
idée, et pourquoi Angular fait-il la différence entre les services de composants ? Une raison importante pour
est qu'il espère que 封装服务
et
数据展示逻辑
Pour plus de connaissances sur la programmation, veuillez visiter : 数据访问逻辑
Vidéo de programmation
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!