Ionic4+Angular

官网：https://angular.io/tutorial/toh-pt6

1、简单封装网络请求

新建HttpService.ts，代码如下

import {Http, Headers, RequestOptions}from "@angular/http";

import {Injectable}from "@angular/core";

import "rxjs/add/operator/toPromise";

import "rxjs/Rx";

import {Observable}from "rxjs";

import "rxjs/add/operator/catch";

import "rxjs/add/operator/debounceTime";

import "rxjs/add/operator/distinctUntilChanged";

import "rxjs/add/operator/map";

import "rxjs/add/operator/switchMap";

import "rxjs/add/observable/throw";

@Injectable()

export class HttpService {

constructor(private http: Http) {

}

headers =new Headers({'Content-Type':'application/x-www'});

options =new RequestOptions({headers:this.headers});

//get请求

  get(url:string): Observable {

return this.http.get(url, {

headers:new Headers({

"Accept":"application/json",

"Content-Type":"application/x-www-form-urlencoded;charset=UTF-8"

      })

})

.map(res => res.json());

}

//post请求

  post(url:string, body:any): Observable {

return this.http.post(url, body, {

headers:new Headers({

"Accept":"application/json",

"Content-Type":"application/x-www-form-urlencoded;charset=UTF-8"

      })

})

.map(res => res.json());

}

}

注：上面执行网络请求，将返回信息转化为json。

2、在src/app/app.module.ts中配置

import {HttpModule}from "@angular/http";

import {HttpService}from "../xxx/HttpService";

@NgModule({

declarations: [

MyApp,

···

],

imports: [

BrowserModule,

IonicModule.forRoot(MyApp),

HttpModule

],

bootstrap: [IonicApp],

entryComponents: [

···

],

providers: [

StatusBar,

SplashScreen,

HttpService,

Camera,

Transfer,

File,

{provide: ErrorHandler,useClass: IonicErrorHandler}

]

})

上面重点：import导入了HttpModule（系统），HttpService（自己写的类），在imports中加入了HttpModule，providers中加入了HttpService。

3、使用方法

export class HomePage {

result:string;

constructor(private http: HttpService) {

this.result =""

    this.http.get("接口地址").subscribe(res => {

//返回结果，直接是json形式

console.log(res)

}, error => {

//错误信息

      });

}

4、proxy.conf.json 配置跨越文件

{

"/youku": {

"target":"https://api.youku.com/",

"secure":false,

"changeOrigin":true,

"pathRewrite": {

"^/youku":""

    }

},"/operation": {

"target":"http://192.168.0.199:8081/",

"secure":false,

"changeOrigin":true,

"pathRewrite": {

"^/operation":""

    }

},"/fdfs": {

"target":"http://127.0.0.1/",

"secure":false,

"changeOrigin":true,

"pathRewrite": {

"^/fdfs":""

    }

}

}