Angular2中http jsonp的示例分析

這篇文章主要介紹Angular2中http jsonp的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

Angular2 Http

1. 使用Http

絕大部分應(yīng)用程序都會(huì)和后臺(tái)服務(wù)打交道，Http是瀏覽器和服務(wù)器之間通訊的主要協(xié)議，通過(guò)Http調(diào)用來(lái)訪問(wèn)遠(yuǎn)程服務(wù)器上相應(yīng)的 Web API。

HttpModule 并不是 Angular 的核心模塊，通過(guò)Angular包中一個(gè)名叫 @angular/http 的獨(dú)立附屬模塊發(fā)布了出來(lái)。我們的應(yīng)用將會(huì)依賴于Angular的 http 服務(wù)，它本身又依賴于其它支持類服務(wù)。來(lái)自 @angular/http 庫(kù)中的 HttpModule 保存著這些 HTTP 相關(guān)服務(wù)提供商的全集。

現(xiàn)代瀏覽器支持兩種基Http的API ： XMLHttpRequest (XHR) 和 JSONP 。少數(shù)瀏覽器還支持 Fetch 。在Angular中分別對(duì)應(yīng)@angular/http 庫(kù)中的HttpModule 和JsonpModule兩個(gè)模塊。

2. GET獲取數(shù)據(jù)

為了能夠使用XHR中的Get方法來(lái)獲取數(shù)據(jù)信息，我們把 HttpModule 添加到 AppModule 的 imports 列表中，這樣本應(yīng)用程序的任何地方都可以訪問(wèn)XHR服務(wù)。

我們使用Http服務(wù)的實(shí)例中的get方法來(lái)執(zhí)行http get方法獲取數(shù)據(jù)，該方法的調(diào)用形式如下

get(url: string, options?: RequestOptionsArgs) : Observable<Response>

來(lái)看一個(gè)簡(jiǎn)單的例子，代碼如下

@Component({ 

selector: 'demo', 

template: '<button id="input" (click)="click()">Get Data</button>', 

}) 

export class DemoComponent { 

constructor(private http: Http) { 

} 

url: string = '/api/list'; 

click() { 

this.http.get(this.url).subscribe(function (data) { 

console.log(data) 

}) 

} 

}

我們?cè)贒emoComponent構(gòu)造函數(shù)中采用DI獲取了Http服務(wù)的實(shí)例http，當(dāng)點(diǎn)擊獲取數(shù)據(jù)的按鈕后，便能夠通過(guò)Http實(shí)例中的get方法，根據(jù)其參數(shù)url地址及options?: RequestOptionsArgs參數(shù)來(lái)獲取對(duì)應(yīng)的數(shù)據(jù)信息。該方法返回的是一個(gè)可觀察對(duì)象 (Observable)，針對(duì)可觀察對(duì)象，我們可以subscribe對(duì)應(yīng)的方法，當(dāng)數(shù)據(jù)返回后進(jìn)行處理。

3. POST發(fā)送數(shù)據(jù)

同樣的，為了能夠使用XHR中的POST方法來(lái)獲取數(shù)據(jù)信息，我們把 HttpModule 添加到 AppModule 的 imports 列表中，這樣本應(yīng)用程序的任何地方都可以訪問(wèn)XHR服務(wù)。

我們使用Http服務(wù)的實(shí)例中的post方法來(lái)執(zhí)行http post方法獲取數(shù)據(jù)，該方法的調(diào)用形式如下

post(url: string, body: any, options?: RequestOptionsArgs) : Observable<Response>

來(lái)看一個(gè)簡(jiǎn)單的例子，代碼如下

@Component({ 

selector: 'demo', 

template: '<button id="input" (click)="click()">Get Data</button>', 

}) 

export class DemoComponent { 

constructor(private http: Http) { 

} 

url: string = '/api/post'; 

click() { 

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

let options = new RequestOptions({ headers: headers }); 

this.http.post(this.url, JSON.stringify({ 'id': '1' }), options).subscribe(function (data) { 

console.log(data) 

}) 

} 

}

我們?cè)贒emoComponent構(gòu)造函數(shù)中采用DI獲取了Http服務(wù)的實(shí)例http，當(dāng)點(diǎn)擊獲取數(shù)據(jù)的按鈕后，便能夠通過(guò)Http實(shí)例中的get方法，根據(jù)其參數(shù)url地址, body:any及options?: RequestOptionsArgs參數(shù)來(lái)提交對(duì)應(yīng)的數(shù)據(jù)信息，其中body表示傳遞到服務(wù)器端的數(shù)據(jù)信息。示例中，我們傳遞json格式的數(shù)據(jù)到服務(wù)器端，所以使用了'Content-Type': 'application/json'頭信息進(jìn)行包裝。

該方法返回的是一個(gè)可觀察對(duì)象 (Observable)，針對(duì)可觀察對(duì)象，我們可以subscribe對(duì)應(yīng)的方法，當(dāng)數(shù)據(jù)返回后進(jìn)行處理。

4. JSONP獲取數(shù)據(jù)

用 Angular Http 服務(wù)發(fā)起 XMLHttpRequests，是與服務(wù)器通訊時(shí)最常用的方法。但它不適合所有場(chǎng)景。

出于安全的考慮，網(wǎng)絡(luò)瀏覽器會(huì)阻止調(diào)用與當(dāng)前頁(yè)面不“同源”的遠(yuǎn)端服務(wù)器的XHR。所謂源就是 URI 的協(xié)議 (scheme) 、主機(jī)名 (host) 和端口號(hào) (port) 這幾部分的組合。這被稱為同源策略。

為了可以向不同源的服務(wù)器發(fā)起 XHR 請(qǐng)求，這時(shí)候就需要支持一種老的、只讀的 ( 譯注：即僅支持 GET) 備選協(xié)議，這就是 JSONP。

為了能夠使用JSONP中的Get方法來(lái)獲取數(shù)據(jù)信息，我們把 JsonpModule 添加到 AppModule 的 imports 列表中，這樣本應(yīng)用程序的任何地方都可以訪問(wèn)Jsonp服務(wù)。

Angular的Jsonp服務(wù)不但通過(guò)JSONP 擴(kuò)展了Http 服務(wù)，而且限制我們只能用GET請(qǐng)求，調(diào)用的形式如下。

get(url: string, options?: RequestOptionsArgs) : Observable<Response>

我們來(lái)看一個(gè)例子，該示例和Http Get訪問(wèn)十分類似，

@Component({ 

selector: 'demo', 

template: '<button id="input" (click)="click()">Get Data</button>', 

}) 

export class DemoComponent { 

constructor(private jsonp: Jsonp) { 

} 

url: string = '/api/list'; 

click() { 

this.jsonp.get(this.url).subscribe((data) => { 

console.log(data); 

}); 

} 

}

5. 結(jié)果處理

5.1 可觀察對(duì)象

我們通過(guò)Http以及Jsonp的api接口可以知道，默認(rèn)返回值都是可觀察對(duì)象 Observable< Response >?？梢园芽捎^察對(duì)象 Observable 看做一個(gè)由某些“源”發(fā)布的事件流。 通過(guò) 訂閱 到可觀察對(duì)象 Observable ，我們監(jiān)聽(tīng)（subscribe）這個(gè)流中的事件。 在這些訂閱中，我們指定了當(dāng) Web 請(qǐng)求生成了一個(gè)成功事件 ( 有效載荷是英雄數(shù)據(jù) ) 或失敗事件 ( 有效載荷是錯(cuò)誤對(duì)象 ) 時(shí)該如何采取行動(dòng)，如示例中所示。

我們的服務(wù)可以返回 HTTP 響應(yīng)對(duì)象Response。但這可不是一個(gè)好主意！ 數(shù)據(jù)服務(wù)的重點(diǎn)在于，對(duì)消費(fèi)者隱藏與服務(wù)器交互的細(xì)節(jié)。其實(shí)上，我們最關(guān)心的還是獲取到的返回?cái)?shù)據(jù)信息，這時(shí)候我們就可以利用RxJS庫(kù)來(lái)對(duì)事件流進(jìn)行一些額外的處理。

RxJS("Reactive Extensions" 的縮寫(xiě))是一個(gè)被 Angular 認(rèn)可的第三方庫(kù)，它實(shí)現(xiàn)了異步可觀察對(duì)象 (asynchronous observable) 模式。Rxjs庫(kù)中包含很多對(duì)事件流進(jìn)行處理的方法，例如map，distinctUntilChanged等操作符。

針對(duì)返回?cái)?shù)據(jù)是json格式的響應(yīng)對(duì)象，可以把Response解析成 JavaScript 對(duì)象——只要調(diào)一下 response.json() 就可以了，這時(shí)候我們就可以利用map操作符來(lái)進(jìn)行處理，例如

this.jsonp.get(this.url) 

.map((rsp:Response)=>{ 

return rsp.json() 

}) 

.subscribe((data) => { 

console.log(data); 

});

5.2 Promise

雖然 Angular 的 http 客戶端 API 返回的是 Observable<Response> 類型的對(duì)象，但我們也可以把它轉(zhuǎn)成 Promise<Response>。這很容易，只需要調(diào)用可觀察對(duì)象 Observable< Response >的方法toPromise()就能夠進(jìn)行轉(zhuǎn)化。例如

this.jsonp.get(this.url) 

.toPromise() 

.then((rsp: Response) => { 

console.log(rsp) 

});

以上是“Angular2中http jsonp的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！