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

最新推荐文章于 2026-05-08 11:09:24 发布

原创最新推荐文章于 2026-05-08 11:09:24 发布 · 2.5k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

前端专栏收录该内容

6 篇文章

订阅专栏

博客介绍了ionic4.x中请求数据的方法，其与angular中几乎相同，get、post和服务器交互使用HttpClientModule模块。详细说明了GET和POST请求的操作步骤，包括在app.module.ts中引入并注入HttpClientModule，在page.ts中引入HttpClient并在构造函数声明。

前言

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