1.描述
无论是使用angularjs做前端或是结合ionic混合开发移动端开发app都需要与后台进行交互,而angular给我提供了httpmodule模块供我们使用。今天就展现一个http的封装和使用的一个具体流程。
2. httpmodule引入
找到app.module.ts文件
import { ngmodule, errorhandler } from '@angular/core'; import { browsermodule } from '@angular/platform-browser'; 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, /** 导入模块 */ httpclientmodule, ionicmodule.forroot(myapp,{ tabshideonsubpages:'true', backbuttontext:'' }) ], bootstrap: [ionicapp], entrycomponents: [ myapp, loginpage, ], providers: [ statusbar, splashscreen, {provide: errorhandler, useclass: ionicerrorhandler}, requestserviceprovider, ] }) export class appmodule {}
按照自己的项目导入httpclientmodule模块即可,我导入其他组件,不用考虑。
3.创建服务
ionic g provider requestservice
执行完成后则会出现如下文件
4.封装服务
/** 导入http相关 */ import { httpclient,httpheaders } from '@angular/common/http'; import { injectable } from '@angular/core'; import {observable} from "rxjs"; /* generated class for the requestserviceprovider provider. see https://angular.io/guide/dependency-injection for more info on providers and angular di. */ @injectable() export class requestserviceprovider { /** 讲基础路径提取说出来,配置ip和端口时只需要在这修改 */ //basepath:string='http://10.4.0.205:8081' reservebasepath:string='http://10.6.254.110:8081' basepath=this.reservebasepath; /** 封装固定的消息头相关 */ private headers = new httpheaders({'content-type': 'application/json'}) // private headers = new httpheaders({'access-control-allow-origin':'*'}); /** 初始化http变量 */ constructor(public http: httpclient) { console.log('hello requestserviceprovider provider'); } /** 给外界提供了四个基础的方法只需要传入uri和data即可 */ get(req:any):observable<any> { return this.http.get(this.basepath+req.uri,{headers:this.headers}); } post(req:any):observable<any>{ return this.http.post(this.basepath+req.uri,req.data,{headers:this.headers}); } put(req:any):observable<any>{ return this.http.put(this.basepath+req.uri,req.data,{headers:this.headers}); } delete(req:any):observable<any>{ return this.http.delete(this.basepath+req.uri,{headers:this.headers}); } }
5.导入声明封装服务
找到app.module.ts文件和第一部类似
import { ngmodule, errorhandler } from '@angular/core'; import { browsermodule } from '@angular/platform-browser'; 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, /** 导入模块 */ httpclientmodule, ionicmodule.forroot(myapp,{ tabshideonsubpages:'true', backbuttontext:'' }) ], bootstrap: [ionicapp], entrycomponents: [ myapp, loginpage, ], providers: [ statusbar, splashscreen, {provide: errorhandler, useclass: ionicerrorhandler}, /** 声明服务 */ requestserviceprovider, ] }) export class appmodule {}
6.使用服务
找到自己的页面所对应的ts文件如下面代码一样
import { component } from '@angular/core'; import { ionicpage, navcontroller, navparams } from 'ionic-angular'; /** 导入声明 */ import {requestserviceprovider} from "../../providers/request-service/request-service"; /** * generated class for the loginpage page. * * see https://ionicframework.com/docs/components/#navigation for more info on * ionic pages and navigation. */ @ionicpage() @component({ selector: 'page-login', templateurl: 'login.html', }) export class loginpage { title:string = '登录' promptmessage:string = '' user={ username:'', password:'' } req={ login:{ uri:'/user/login' } } constructor(public navctrl: navcontroller, public navparams: navparams, /** 初始化服务对象 */ private requestservice:requestserviceprovider) { } ionviewdidload() { console.log('ionviewdidload loginpage'); } login(){ /** 调用post方法,subscribe()方法可以出发请求,调用一次发送一次,调用多次发多次 */ this.requestservice.post({uri:this.req.login.uri,data:user}).subscribe((res:any)=>{ console.log(res); if (res.code == 0){ this.promptmessage = res.message; } else { this.promptmessage = res.message; } }, error1 => { alert(json.stringify(error1)) }); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
网友评论