angularjs http与后台交互的实现示例

1.描述

无论是使用开发做前端或是结合离子的混合开发移动端开发应用都需要与后台进行交互，而有角的给我提供了模块模块供我们使用。今天就展现一个超文本传送协议(超文本传输协议的缩写)的封装和使用的一个具体流程。

2.模块引入

找到app.module.ts文件

从“@棱角分明/核心”导入{ n模块，错误处理程序}；从" @angular/platform-browser "导入{ BrowserModule }；从“离子角”导入{ IonicApp，IonicModule，ion cerrorhandler }；从""导入{ MyApp } ./app。组件'；从导入{登录页面}./pages/log in/log in '；/**引入HttpClientModule模块*/从" @angular/common/http "导入{ HttpClientModule }；从""导入{ RequestServiceProvider }./providers/request-service/request-service '；从" @ ion-native/状态栏"导入{状态栏}；从" @ ion-native/闪屏"导入{闪屏}；@ ng module({ 0宣告： [ MyApp，LoginPage，]，imports: [ BrowserModule，/**)导入模块*/HttpClientModule，ionimmodule。forboot(MyApp，{ tabsHideOnSubPages: ' true '，backButtonText:'' }) ]，bootstrap :[ion CAPP]，entrycomponents 3360[MyApp，LoginPage，]，providers: [ StatusBar，SplashScreen，{ provide: ErrorHandler，useClass: IonicErrorHandler }，RequestServiceProvider，]})导出类AppModule按照自己的项目导入HttpClientModule模块即可，我导入其他组件，不用考虑。

3.创建服务

离子g提供程序请求服务执行完成后则会出现如下文件

4.封装服务

/**导入超文本传送协议(超文本传输协议的缩写)相关*/从" @angular/common/http "导入{ HttpClient，Httpaders }；从“@棱角分明/核心”导入{内射}；从“rjs”导入{可观察到}；/*为RequestServiceProvider提供程序生成的类。有关提供商和角度DI的更多信息，请参见https://angular.io/guide/dependency-injection。*/@内射()导出类request service provider {/* * *讲基础路径提取说出来，配置互联网协议(互联网协议的缩写)和端口时只需要在这修改*///基本路径：字符串=' http://10。4 .0 .205:8081 ' reservebasepath : string=' http://10。6 .254 .11033608081 '基本路径=这个。reservebasepath/** 封装固定的消息头相关*/私有头=新的httpaders({ ' Content-Type ' : ' application/JSON ' })//私有头=新的httpaders({ '访问控制-允许-源' : ' * })；/**初始化超文本传送协议(超文本传输协议的缩写)变量*/constructor(公共http : HttpClient){ console。日志(‘Hello RequestServiceProvider Provider’)；} /** 给外界提供了四个基础的方法只需要传入上呼吸道感染和数据即可*/get(req : any):可观测量ny { return this。http。得到(这个。BasePath请求。uri，{ header RS :这个。headers })；} post(req : any): observable ny { return this。http。贴吧(这个。BasePath请求。uri，req.data，{ header RS : this。headers })；} put(req : any): observable ny { return this。http。放(这个。BasePath请求。uri，req.data，{ header RS : this。headers })；}删除(请求：任何):可观察到的ny {返回此。http。删除(这个。BasePath请求。uri，{ header RS :这个。headers })；}}5.导入声明封装服务

找到app.module.ts文件和第一部类似

从“@棱角分明/核心”导入{ n模块，错误处理程序}；从" @angular/platform-browser "导入{ BrowserModule }；从“离子角”导入{ IonicApp，IonicModule，ion cerrorhandler }；从""导入{ MyApp } ./app。组件'；从导入{登录页面}./pages/log in/log in '；/**引入HttpClientModule模块*/从" @angular/common/http "导入{ HttpClientModule }；/**导入自定的服务*/从""导入{ RequestServiceProvider }./providers/request-service/request-service '；从" @ ion-native/状态栏"导入{状态栏}；从" @ ion-native/闪屏"导入{闪屏}；@ ng module({ 0宣告： [ MyApp，LoginPage，]，imports: [ BrowserModule，/**)导入模块*/HttpClientModule，ionimmodule。forboot(MyApp，{ tabsHideOnSubPages: ' true '，backButtonText:'' }) ]，bootstrap :[ion CAPP]，entrycomponents 3360[MyApp，LoginPage，]，providers: [ StatusBar，SplashScreen，{ provide: ErrorHandler，useClass: IonicErrorHandler }，/**声明服务*/RequestServiceProvider，]})导出类AppModule { 6 } .使用服务

找到自己的页面所对应的分时（同分时)文件如下面代码一样

从“@棱角分明/核心”导入{组件}；从"离子角度"导入{离子页面、导航控制器、导航参数};/**导入声明*/从""导入{RequestServiceProvider}././providers/request-service/request-service '；/** *为登录页面生成的类。* *有关*离子页面和导航的更多信息，请参见https://ionicframework.com/docs/components/#navigation。*/@ ioncpage()@ Component({选择器： '页面-登录'，模板URLs : '登录。html '，})导出类LoginPage { title:string='登录prompt messages : string=' ' ' user={ username : ' '，password : ' ' } req={ log in : { uri : '/user/log in ' } }构造函数(公共navctrl :导航控制器，公共navParams: NavParams，/*)初始化服务对象*/private request service 3360 request service provider){ } ionviewdload(){ console。日志(' ionviewdloadloginpage ')；}登录(){/* * *调用邮政方法，订阅()方法可以出发请求，调用一次发送一次，调用多次发多次*/这个。RequestServiCe。发布({ uri : this。请求。登录。uri，data:user}).订阅((RES : any)={控制台。日志(RES)；if(RES . code==0){ this。提示消息=RES .消息；} else { this。提示消息=RES .消息；} }，错误1={ alert(JSON。stringify(错误1))})；}}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。