这篇文章主要介绍了angularjs http与后台交互的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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))
   });

 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
传亚马逊参股外卖平台Deliveroo拟四月进行IPO,估值达136亿美元

传亚马逊参股外卖平台

据报道,亚马逊参股的外卖平台Deliveroo或将在今年四月
腾讯音乐宣布收购懒人听书100%股权,后者将保持独立运营

腾讯音乐宣布收购懒人

腾讯音乐娱乐集团(下称TME)宣布收购懒人听书。依照该协
脉脉回应“B站起诉不正当竞争胜诉”:已达成和解

脉脉回应“B站起诉不

针对网传“B站起诉脉脉不正当竞争胜诉”一事,脉脉通过
苹果iPhone 13最新传闻汇总:可能改名或降价 或于9月中旬发布

苹果iPhone 13最新传

随着下一代iPhone发布日期的临近(今年9月),泄露的消息只
国家邮政局下发紧急通知:严密防范疫情通过寄递渠道传播扩散

国家邮政局下发紧急通

1月13日,国家邮政局下发紧急通知,要求全系统全行业紧密
“完美流量三角”是个悖论吗?

“完美流量三角”是个

对现在的广告主而言,做营销绝不是件容易的事。
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,