【Ionic4】Ionic4与WebAPI交互（GET POST …）

前言

ionic4.x中请求数据和angular中几乎是一样的，其中get、post和和服务器交互使用的是HttpClientModule模块

GET

• 在app.module.ts中引入HttpClientModule 并注入

import { HttpClientModule, HttpClientJsonpModule} from '@angular/common/http';

• 在需要的page.ts中引入HttpClient并在构造函数声明

import { HttpClient } from "@angular/common/http";
constructor(public http: HttpClient) { }

• 获取方法

getRecords() {
const httpOptions = {
headers: new HttpHeaders({
'Content-type': 'application/json'
})
};
// get请求方法
const url = 'http://192.168.**.***:8089/RecordApi/SelectRecordByState?userId=' + this.userId;
this.http.get(url, httpOptions).subscribe(response => {
console.log(response);
});

POST

• 在app.module.ts中引入HttpClientModule 并注入

import { HttpClientModule, HttpClientJsonpModule} from '@angular/common/http';

• 在需要的page.ts中引入HttpClient并在构造函数声明

import { HttpClient, HttpHeaders } from "@angular/common/http";
constructor(public http: HttpClient) { }

• 提交方法

insertTomatoRecord(): void {
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
const url = 'http://192.168.**.***:8089/api/recordSelect/InsertTomatoRecord';
const body = JSON.stringify([
{
"tomatoName": this.tomatoname,
"tomatoTime": this.tomatoSecond,
"userId": this.userId,
"userCode": this.userCode,
"userName": this.userName,
"finishTime": this.finishTime,
"startTime": this.startTime
}
]);
this.http.post(url, body, httpOptions).subscribe(response => {
console.log(response);
});
}