Ionic3的HTTP请求方法

Ionic的http请求方法，一种是使用Ionic的Native的Http方法，另一种是使用Angular的Http请求方法。

第一种真的是看着文档都实现不了，很奇怪的错（官网文档：https://ionicframework.com/docs/native/http/），不知道缺少了什么，这种方式就先不研究了

第二种Angular的请求方法又有两种，一种是使用HttpModule 的方式，现在网上大多数的介绍都是如此，但是在新版本中这种方法已经不推荐了，推荐的是另一种使用HttpClientModule 方式

HttpModule方式

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

在app.module.ts 文件中添加

...
import { HttpProvider } from '../providers/http/http';
import { HttpModule } from '@angular/http';

@NgModule({
...
  imports: [
    ...
    HttpModule,    
  ],
...
  providers: [
    ...
    HttpProvider
  ]
})
export class AppModule {}

在http.ts文件中

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class HttpProvider {

  path: string = 'https://randomuser.me/api/?results=25';

  constructor(public http: Http) {
    console.log('Hello HttpProvider Provider');
  }

  loadUsers(){
    return this.http.get(this.path).map(res => res.json(), err => {
      console.log(err);
    })
  }

}

在调用HTTP请求的页面中 test.ts

import {Component} from '@angular/core';
import {HttpProvider} from "../../providers/http/http";

@Component({
  selector: 'page-test',
  templateUrl: 'test.html',
})

export class TestPage {

  constructor(public http: HttpProvider) {
  }

  f(){
    this.http.loadUsers().subscribe(res => {
        console.log(res.results);
      },
      err => {
        console.log(err);
      });
  }
}

但是在新版的angular中，已经不推荐使用这种方法了

 

 

HttpClientModule方式

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

这种方法不但推荐，而且使用起来非常简单

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

在app.module.ts 文件中添加

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

@NgModule({
...
  imports: [
    ...
    HttpClientModule,    
  ],
...
})

在调用HTTP请求的页面中 test.ts

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

@Component({
  selector: 'page-test',
  templateUrl: 'test.html',
})

export class TestPage {
  path: string = 'https://randomuser.me/api/?results=25';

  constructor(private http: HttpClient) {
  }

  f(){
    this.http.get(this.path)
      .subscribe(data => {
        console.log(data);
      });
  }
}

原创文章，欢迎转载，转载请注明出处！