这篇文章将为大家详细讲解有关angular8封装http服务的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
要在angular里使用http服务必须先在
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 { }根据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) =>{});
关于“angular8封装http服务的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
