008 ionic5 数据交互（get jsonp post）

在app.module.ts 中引入

import {HttpClientModule} from '@angular/common/http';
imports: [
        BrowserModule,
        HttpClientModule
  ]

在用到的地方引入HttpClient

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

get数据

var api = ".......";
this.http.get(api).subscribe(response => {
    console.log(response);
});

post

在用到的地方引入HttpClient、HttpHeaders

import {HttpClient,HttpHeaders} from "@angular/common/http";
constructor(public http:HttpClient) { }
const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
var api = "....";
this.http.post(api,{username:'张三',age:'20'},httpOptions).subscribe(response => {
    console.log(response);
});

jsonp

在app.module.ts 修改

import {HttpClientModule,HttpClientJsonpModule} from '@angular/common/http';
imports: [
    BrowserModule,
    HttpClientModule,
    HttpClientJsonpModule
]

用到的地方引入

import {HttpClient} from "@angular/common/http";
constructor(public http:HttpClient) { }
var api = "......";
this.http.jsonp(api,'callback').subscribe(response => {
    console.log(response);
});

http请求封装

ionic g service services/common

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

import { HttpClientModule } from '@angular/common/http'
imports: [ BrowserModule, HttpClientModule ]

common.service.ts引入HttpClient

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

common.service.ts完整代码

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from "@angular/common/http";
@Injectable({
  providedIn: 'root'
})
export class CommonService {
//设置一个域名，为了好维护
  public config:any={
    //域名：
    domain:'http://192.168.0.2:8080'
  }
  constructor(public http: HttpClient) {
  }
  //封装了一个get请求
  public ajaxGet(api) {
    var api = this.config.domain + api
    return new Promise((resolve, reject) => {
      this.http.get(api).subscribe((response) => {
        resolve(response);
      }, (err) => {
        reject(err);
      })
    })
  }
  //封装了一个post请求 
  public ajaxPost(url:String, json:Object) {
    const httpoptions = {
      headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'})
    };
    var api = this.config.domain + url;
    return new Promise((resove, reject) => {
      this.http.post(api, json, httpoptions).subscribe((response) => {
        resove(response);
      }, (error) => {
        reject(error);
      })
    })
  }
}

appmodule.ts 引入配置

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

providers下面声明CommonService

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

使用地方

import {CommonService} from '../services/common.service';  //注意两个点
constructor(public commonService: CommonService)
getData(){
    var api='.....';
    this.commonService.ajaxGet(api).then((Response)=>{
         console.log(Response); 
    })
  }