1.说明无论是使用angularjs做前端还是结合ionic开发移动端开发app都需要和后台进行交互，angular为我提供了httpModule模块供我们使用。今天给大家展示一下http的封装和使用的具体过程。2.HttpModule导入找到app.module.ts文件import{NgModule,ErrorHandler}from'@angular/core';import{BrowserModule}from'@angular/platform-b??rowser';import{IonicApp,IonicModule,IonicErrorHandler}from'ionic-angular';import{MyApp}from'./app.component';import{LoginPage}from"../pages/login/login";/**导入HttpClientModule模块*/import{HttpClientModule}from"@angular/common/http";从"../providers/request-service/request-service"导入{RequestServiceProvider};从'@ionic-native/status-bar'导入{StatusBar};从'@ionic-导入{SplashScreen}native/splash-screen';@NgModule({declarations:[MyApp,LoginPage,],imports:[BrowserModule,/**导入模块*/HttpClientModule,IonicModule.forRoot(MyApp,{tabsHideOnSubPages:'true',backButtonText:''})],bootstrap:[IonicApp],entryComponents:[MyApp,LoginPage,],providers:[StatusBar,SplashScreen,{provide:ErrorHandler,useClass:IonicErrorHandler},RequestServiceProvider,]})exportclassAppModule{}根据自己项目导入HttpClientModule模块即可，我导入其他组件，不用担心3.创建服务ionicgproviderRequestService后，会出现如下文件4.封装服务/**importhttprelated*/import{HttpClient,HttpHeaders}from'@angular/common/http';import{Injectable}from'@angular/core';import{Observable}from"rxjs";/*为RequestServiceProvider提供者生成的类。provider和AngularDI的更多信息见https://angular.io/guide/dependency-injection。*/@Injectable()exportclassRequestServiceProvider{/**讲提取基本路径，这里只需要修改配置ip和端口时*///basePath:string='http://10.4.0.205:8081'reserveBasePath:string='http://10.6.254.110:8081'basePath=this.reserveBasePath;/**固定消息头的封装*/privateheaders=newHttpHeaders({'Content-Type':'application/json'})//privateheaders=newHttpHeaders({'Access-Control-Allow-Origin':'*'});/**初始化http变量*/constructor(publichttp:HttpClient){console.log('HelloRequestServiceProviderProvider');}/**对外提供四种基本方法，只需要传入uri和data*/get(req:any):Observable{返回this.http.get(this.basePath+req.uri,{headers:this.headers});}post(req:any):Observable{returnthis.http.post(this.basePath+req.uri,req.data,{headers:this.headers});}put(req:any):Observable{returnthis.http.put(this.basePath+req.uri,req.data,{headers:this.headers});}delete(req:any):Observable{returnthis.http.delete(this.basePath+req.uri,{headers:this.headers});}}5.导入声明封装服务找到app.module.ts文件和第一部分似import{NgModule,ErrorHandler}from'@angular/core';import{BrowserModule}from'@angular/platform-b??rowser';import{IonicApp,IonicModule,IonicErrorHandler}from'ionic-angular';import{MyApp}from'./app.component';import{LoginPage}from"../pages/login/login";/**导入HttpClientModule模块*/import{HttpClientModule}from"@angular/common/http";/**导入自定义的服务*/import{RequestServiceProvider}from"../providers/request-service/request-service";import{StatusBar}from'@ionic-native/status-bar';import{SplashScreen}from'@ionic-native/splash-screen';@NgModule({declarations:[MyApp,LoginPage,],imports:[BrowserModule,/**importmodule*/HttpClientModule,IonicModule.forRoot(MyApp,{tabsHideOnSubPages:'true',backButtonText:''})],bootstrap:[IonicApp],entryComponents:[MyApp,LoginPage,],供应商:[StatusBar,SplashScreen,{provide:ErrorHandler,useClass:IonicErrorHandler},/**声明服务*/RequestServiceProvider,]})exportclassAppModule{}6.使用服务找到自己页面对应的ts文件，如下代码import{Component}from'@angular/core';import{IonicPage,NavController,NavParams}from'ionic-angular';/**Importstatement*/import{RequestServiceProvider}from"../../providers/request-service/request-service";/***为LoginPage页面生成的类。**有关*Ionic页面和导航的更多信息，请参阅https://ionicframework.com/docs/components/#navigation。*/@IonicPage()@Component({selector:'page-login',templateUrl:'login.html',})exportclassLoginPage{title:string='login'promptMessage:string=''user={username:'',password:''}req={login:{uri:'/user/login'}}constructor(publicnavCtrl:NavController,publicnavParams:NavParams,/**初始化服务对象*/privaterequestService:RequestServiceProvider){}ionViewDidLoad(){console.log('ionViewDidLoadLoginPage');}login(){/**调用post方法，subscribe()方法可以发起请求，调用一次发送一次，调用多次发送多次*/this.requestService.post({uri:this.req.login.uri,data:user}).subscribe((res:any)=>{console.log(res);if(res.code==0){这个。promptMessage=res.message;}else{this.promptMessage=res.message;}},error1=>{alert(JSON.stringify(error1))});}}
