angular 學習筆記 get post以及jsonp請求數據

1、app.module.ts註冊HTTP JSONP服務
1.引入HttpModule 、JsonpModule 普通的 HTTP 調用並不須要用到 JsonpModule，不過稍後咱們就會演示對 JSONP 的支持， 因此如今就加載它，省得再回來改浪費時間。

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

2.HttpModule 、JsonpModule依賴注入

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HomeComponent, 
    NewsComponent,
     NewscontentComponent 
],
 imports: [ 
    BrowserModule,
    FormsModule,
    HttpModule, 
    JsonpModule, 
    AppRoutingModule 
 ], 
providers: [
    StorageService,
    NewsService
],
 bootstrap: [AppComponent]
}) 

2、經過 Http、Jsonp請求數據、不用RxJs
RxJS是一種針對異步數據流編程工具，或者叫響應式擴展編程；無論如何解釋RxJS其目標就是異步編程，Angular引入RxJS爲了就是讓異步可控、更簡單。 app.module.ts引入而且依賴注入完成之後，在須要用到的地方執行下面操做。 使用Http、Jsonp：

一、在須要請求數據的地方引入 Http

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

二、構造函數內申明：

constructor(private http:Http,private jsonp:Jsonp) { }

三、對應的方法內使用http請求數據

this.http.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1") .subscribe(
     function(data){ console.log(data); //參數1: function 成功 ...
　　　　var _that =this;
　　　　var list =JSON.parse(data); //前臺直接經過*ngFor就能夠循環list數據了
 },
　　  function(err){  //參數2: function 失敗...
　　　　　　console.log('失敗'); 
    }
 );

 jsonp 同理把 http更換成jsonp 就能夠了 可是要在url加回調 即拼接 &callback=JSONP_CALLBACK")

注：JSON.parse可將JSON字符串轉譯成JSON對象。

var _that =this; 指向方法外定義的數組

=========================================================

使用Post
1. 引入Headers 、Http模塊

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

2. 實例化Headers

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

this.http .post('http://localhost:8008/api/test', JSON.stringify(
　　{username: 'admin'}), {headers:this.headers}
).subscribe(function(res){
 　　console.log(res.json()); }
);

 

3、經過 Http、Jsonp請求數據、使用RxJs。

須要用到請求數據的地方引入Http模塊Jsonp模塊，以及rxjs RxJS是一種針對異步數據流編程工具，或者叫響應式擴展編程；可無論如何解釋RxJS其目標就是異步編程，Angular引入RxJS爲了就是讓異步可控、更簡單。

大部分RxJS操做符都不包括在Angular的Observable基本實現中，基本實現只包括Angular自己所需的功能。 若是想要更多的RxJS功能，咱們必須導入其所定義的庫來擴展Observable對象， 如下是這個模塊所需導入的全部RxJS操做符：

一、 引入Http 、Jsonp、RxJs 模塊

import {Http,Jsonp} from "@angular/http"; import {Observable} from "rxjs"; import "rxjs/Rx"; 

你可能並不熟悉這種import 'rxjs/Rx'語法，它缺乏了花括號中的導入列表：{...}。 這是由於咱們並不須要操做符自己，這種狀況下，咱們所作的實際上是導入這個庫，加載並運行其中的腳本， 它會把操做符添加到Observable類中。

二、 構造函數內申明：

constructor(private http:Http,private jsonp:Jsonp) { }

三、get請求 主要添加map(res => res.json()這個方法

this.http.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1") .map(res => res.json()) .subscribe( function(data){ console.log(data); } );

四、Jsonp請求 主要添加map(res => res.json()這個方法

this.jsonp.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK") .map(res => res.json()) .subscribe( function(data){ console.log(data);} );

http.get 方法中返回一個Observable對象，咱們以後調用RxJS的map操做符對返回的數據作處理。