angularjs http與后臺交互的實現(xiàn)示例

更新時間：2018年12月21日 09:56:15 作者：liukai90

這篇文章主要介紹了angularjs http與后臺交互的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.描述

無論是使用angularjs做前端或是結(jié)合ionic混合開發(fā)移動端開發(fā)app都需要與后臺進行交互，而angular給我提供了httpModule模塊供我們使用。今天就展現(xiàn)一個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,
   /**
   導(dǎo)入模塊
   */
  HttpClientModule,
  
  IonicModule.forRoot(MyApp,{
   tabsHideOnSubPages:'true',
   backButtonText:''
  })
 ],
 bootstrap: [IonicApp],
 entryComponents: [
  MyApp,
  
  LoginPage,
  
 ],
 providers: [
  StatusBar,
  SplashScreen,
  {provide: ErrorHandler, useClass: IonicErrorHandler},
  RequestServiceProvider,
  
 ]
})
export class AppModule {}

按照自己的項目導(dǎo)入HttpClientModule模塊即可，我導(dǎo)入其他組件，不用考慮。

3.創(chuàng)建服務(wù)

ionic g provider RequestService

執(zhí)行完成后則會出現(xiàn)如下文件

4.封裝服務(wù)

/**
導(dǎo)入http相關(guān)
*/
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 {

  /**
  講基礎(chǔ)路徑提取說出來，配置ip和端口時只需要在這修改
  */
 //basePath:string='http://10.4.0.205:8081'
 reserveBasePath:string='http://10.6.254.110:8081'
 basePath=this.reserveBasePath;
  /**
  封裝固定的消息頭相關(guān)
  */
 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');
 }

  /**
  給外界提供了四個基礎(chǔ)的方法只需要傳入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.導(dǎo)入聲明封裝服務(wù)

找到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";

/**
導(dǎo)入自定的服務(wù)
*/
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,
   /**
   導(dǎo)入模塊
   */
  HttpClientModule,
  
  IonicModule.forRoot(MyApp,{
   tabsHideOnSubPages:'true',
   backButtonText:''
  })
 ],
 bootstrap: [IonicApp],
 entryComponents: [
  MyApp,
  
  LoginPage,
  
 ],
 providers: [
  StatusBar,
  SplashScreen,
  {provide: ErrorHandler, useClass: IonicErrorHandler},
  /**
  聲明服務(wù)
  */
  RequestServiceProvider,
  
 ]
})
export class AppModule {}

6.使用服務(wù)

找到自己的頁面所對應(yīng)的ts文件如下面代碼一樣

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
導(dǎo)入聲明
*/
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,
        /**
        初始化服務(wù)對象
        */
       private requestService:RequestServiceProvider) {

 }
 
 ionViewDidLoad() {
  console.log('ionViewDidLoad LoginPage');
 }
 login(){
 
   /**
   調(diào)用post方法，subscribe()方法可以出發(fā)請求，調(diào)用一次發(fā)送一次，調(diào)用多次發(fā)多次
   */
  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))
   });

 }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: