Angular 4 get post 以及 jsonp 從數據庫請求數據

一。

1. 使用命名#ng g component requestStyle，來建立一個新的演示組件，並經過selector來添加到app.component.html中，以起到添加到主頁中顯示的目的。

2. 後天的代碼是用express，node環境配置的web服務器，支持簡單的get,post, jsonp。

3. 在app.component.ts中imports引用HttpModule,JsonpModule(用來支持JSONP)

二：（不是用響應式編程的庫RxJS）。

 1. 經過Http, Jsonp請求數據，不用RxJs（主要用來實現響應式編程的包，主要用於異步編程，Angular引入RxJS爲了實現異步可控，更簡單）

a. 在類的構造器中引入http,jsonp（jsonp時使用）：

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

b. 使用Http的get獲取數據：

  

1 getDataByGet() {
2     this.http.get('http://localhost:3000/news').subscribe((data)=>{ 3 console.log(JSON.parse(data['_body'])['msg']); 4  }, 5 (error) => { 6  console.log(error); 7  }); 8 }

2. 使用jsonp跨域來從服務器中去獲取數據

a. 首先要在須要使用的jsonp的類的構造函數中引入Jsonp：

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

b. 須要特別注意的是：使用jsonp時須要在路徑中添加回調函數即(callback=JSONP_CALLBACK)

getDataByJsonp() {
    this.jsonp.get('http://localhost:3000/news?callback=JSONP_CALLBACK').subscribe((data)=>{ console.log(data['_body']['msg']); }, (error) => { console.log(error); }) }

3. 使用http的post方法來與服務器進行通訊；(注意：在這種方式的通訊中，須要設置添加headers.)

 a， 首先須要引入Headers, 即 import { Headers } from '@angular/http';

 b. 而後在類中實例化Headers: 即：private headers: Headers = new Headers({'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'});

 c. post的格式爲：this.http.post(url, JSON.stringify(數據對象)，{headers: this.headers}).subscribe();

1 getDataByPost() {
2   // 當使用post請求時要設置header，即請求的header對象，post的請求的參數爲(url,postData,header)
3     this.http.post('http://localhost:3000/dologin',JSON.stringify({'username': 'xiaoxiao'}),{headers: this.headers}).subscribe((data)=>{ 4 console.log(JSON.parse(data['_body'])['msg']); 5  }, 6 (error) => { 7  console.log(error); 8  }); 9 }

 

三：（使用RxJS的庫來實現get,post ,jsonp獲取數據，實現響應式編程）

須要用到請求數據的地方引入Http模塊Jsonp模塊，以及rxjs.

RxJS是一種針對異步數據流編程工具，或者叫響應式擴展編程；他的目標主要是異步編程，Angular引用的RxJS爲了就是讓異步可控，更簡單。

大部分的RxJS操做符都不包括在Angular的Observable基本實現中，基本實現只包括Angular中自己所需的功能。

若是想要更多的RxJS功能，咱們必須導入其所定義的庫來擴展Observabe對象，如下是這個模塊所需導入的全部的RxJS操做符：

1. 首先，引用Http, JSONP, RxJS 模塊

1 import {Http, Jsonp} from '@angular/http';
2 import {Observable} from 'rxjs'; 3 import 'rxjs/Rx';

注：咱們所作的最後一行的做用是隻是導入這個庫，加載並運行其中的腳本，他會把操做符添加到Observable類中。

2. 構造函數中聲明：

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

3. 對get ， post , jsonp的方法函數進行一些類的改造以下：

get方法：

getDataByRXGet() {
    this.http.get('http://localhost:3000/news').map(res => res.json()).subscribe((data)=>{ console.log(data); }, (error) => { console.log(error); }); }

post方法改造：

 1 getDataByRXPost() {
 2     // 當使用post請求時要設置header，即請求的header對象，post的請求的參數爲(url,postData,header)
 3     this.http.post('http://localhost:3000/dologin',JSON.stringify({'username': 'xiaoxiao'}),{headers: this.headers}) 4 .map(res => res.json()) 5 .subscribe((data)=>{ 6 // console.log(JSON.parse(data['_body'])['msg']); 7  console.log(data); 8  }, 9 (error) => { 10  console.log(error); 11  }); 12 }

jsonp方法改造：

 1 getDataByRXJsonp() {
 2     this.jsonp.get('http://localhost:3000/news?callback=JSONP_CALLBACK') 3 .map(res => res.json()) 4 .subscribe((data)=>{ 5 // console.log(data['_body']['msg']); 6  console.log(data); 7 }, (error) => { 8  console.log(error); 9  }) 10 }