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

 

原創文章，歡迎轉載，轉載請注明出處！