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

  }

 
}