【ionic】数据交互-get请求

使用HttpClientModule模块使get请求与服务器进行交互

1.在app.module.ts中引入HttpClientModule

//引入http相关模块
import { HttpClientModule } from '@angular/common/http';

imports: [BrowserModule,
		  IonicModule.forRoot(), 
 		  AppRoutingModule,
          HttpClientModule],

2.新建http服务

ionic g service services/common

引入HttpClient并在构造函数中声明（common.service.ts）

import { HttpClient } from '@angular/common/http';

constructor(public http:HttpClient) {}

3.get请求方法（common.service.ts）

export class CommonService {

  public config:any={
    domain:'http://192.168.22.XX:XXXX/'//接口公共部分
  }
  constructor(public http:HttpClient) {}//构造函数

  ajaxGet(url){
    var api=this.config.domain + url;
    return new Promise ((resove,reject) =>{
      this.http.get(api).subscribe((response)=>{
        resove(response);
      },(error)=>{
        reject(error);
      })
    })
  }
}

4.在具体的页面中使用get方法

  QuerybycardID() {
    var api = "OrderSystem/Card/IsExistCardBycardID?cardID=" + this.person.cardno;
    this.common.ajaxGet(api).then((response) =>{
       console.log(response);
       this.person.name= response[0].ownerName;
       this.person.banlance=response[0].cash;
       this.person.state= response[0].status;
    })
  }

5.页面效果