【ionic4】创建公共请求(get与post请求)数据的服务(完美例子)

1、在终端输入下面命令

ionic g service services/common

2、出现下图

3、app.module.ts引入http相关模块

引入http相关模块

import { HttpClientModule } from '@angular/common/http'

添加声明

imports: [ BrowserModule, HttpClientModule ]

4、在common.service.ts引入HttpClient，并且在构造函数中声明

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

constructor(public http:HttpClient) { }

5、common.service.ts中代码

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { url } from 'inspector';


@Injectable({
  providedIn: 'root'
})

export class CommonService {


//设置一个域名，为了好维护
  public config:any={
    //域名：
    domain:'http://localhost:8839/'
  }

  constructor(public http: HttpClient) {
  }
 
  //封装了一个get请求
  ajaxGet(api) {
    var api=this.config.domain+url;
    return new Promise((resolve, reject) => {
      this.http.get(api).subscribe((response) => {
        resolve(response);
      }, (err) => {
        reject(err);
      })
    })
  }
  //封装了一个post请求 
  ajaxPost(url:String, json:Object) {
    var api = this.config.domain + url;
    return new Promise((resove, reject) => {
      this.http.post(api, json).subscribe((response) => {
        resove(response);
      }, (error) => {
        reject(error);
      })
    })
  }
}

6、在appmodule.ts 引入配置的公共的服务

import{CommonService} from './services/common.service';

然后在providers下面声明CommonService,：

providers: [
    StatusBar,
    SplashScreen,
    CommonService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],

7、在首页进行获取数据

ts中的代码

import { Component } from '@angular/core';
import {CommonService} from '../services/common.service';  //注意两个点

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})

export class Tab1Page {
  constructor(public httpService:CommonService){
  }

  ngOnInit(): void {
    this.getData()  
  }

  getData(){
    var api='http://192.168.22.77:8081/NO1/V1/ContractCheck/GetAllContract?page=1&limit=20';
    this.httpService.ajaxGet(api).then((Response)=>{
        this.list=Response;
    })
  }
}

8、html中的代码

<ion-header>
  <ion-toolbar>
    <ion-title>
       首页
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of list">
      <ion-label>{{item.id}}</ion-label>
    </ion-item> 
  </ion-list>
</ion-content>

页面效果：