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)) }); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。