這篇文章主要介紹Angular2中http jsonp的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
赫章網站制作公司哪家好，找創(chuàng)新互聯(lián)！從網頁設計、網站建設、微信開發(fā)、APP開發(fā)、成都響應式網站建設等網站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)2013年開創(chuàng)至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創(chuàng)新互聯(lián)。
Angular2 Http
1. 使用Http
絕大部分應用程序都會和后臺服務打交道，Http是瀏覽器和服務器之間通訊的主要協(xié)議，通過Http調用來訪問遠程服務器上相應的 Web API。
HttpModule 并不是 Angular 的核心模塊，通過Angular包中一個名叫 @angular/http 的獨立附屬模塊發(fā)布了出來。我們的應用將會依賴于Angular的 http 服務，它本身又依賴于其它支持類服務。來自 @angular/http 庫中的 HttpModule 保存著這些 HTTP 相關服務提供商的全集。
現(xiàn)代瀏覽器支持兩種基Http的API ： XMLHttpRequest (XHR) 和 JSONP 。少數(shù)瀏覽器還支持 Fetch 。在Angular中分別對應@angular/http 庫中的HttpModule 和JsonpModule兩個模塊。
2. GET獲取數(shù)據(jù)
為了能夠使用XHR中的Get方法來獲取數(shù)據(jù)信息，我們把 HttpModule 添加到 AppModule 的 imports 列表中，這樣本應用程序的任何地方都可以訪問XHR服務。
我們使用Http服務的實例中的get方法來執(zhí)行http get方法獲取數(shù)據(jù)，該方法的調用形式如下
get(url: string, options?: RequestOptionsArgs) : Observable
來看一個簡單的例子，代碼如下
重慶分公司
重慶分公司
@Component({
selector: 'demo',
template: 'Get Data',
})
export class DemoComponent {
constructor(private http: Http) {
}
url: string = '/api/list';
click() {
this.http.get(this.url).subscribe(function (data) {
console.log(data)
})
}
} 我們在DemoComponent構造函數(shù)中采用DI獲取了Http服務的實例http，當點擊獲取數(shù)據(jù)的按鈕后，便能夠通過Http實例中的get方法，根據(jù)其參數(shù)url地址及options?: RequestOptionsArgs參數(shù)來獲取對應的數(shù)據(jù)信息。該方法返回的是一個可觀察對象 (Observable)，針對可觀察對象，我們可以subscribe對應的方法，當數(shù)據(jù)返回后進行處理。
3. POST發(fā)送數(shù)據(jù)
同樣的，為了能夠使用XHR中的POST方法來獲取數(shù)據(jù)信息，我們把 HttpModule 添加到 AppModule 的 imports 列表中，這樣本應用程序的任何地方都可以訪問XHR服務。
我們使用Http服務的實例中的post方法來執(zhí)行http post方法獲取數(shù)據(jù)，該方法的調用形式如下
post(url: string, body: any, options?: RequestOptionsArgs) : Observable
來看一個簡單的例子，代碼如下
@Component({
selector: 'demo',
template: 'Get Data',
})
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)
})
}
} 我們在DemoComponent構造函數(shù)中采用DI獲取了Http服務的實例http，當點擊獲取數(shù)據(jù)的按鈕后，便能夠通過Http實例中的get方法，根據(jù)其參數(shù)url地址, body:any及options?: RequestOptionsArgs參數(shù)來提交對應的數(shù)據(jù)信息，其中body表示傳遞到服務器端的數(shù)據(jù)信息。示例中，我們傳遞json格式的數(shù)據(jù)到服務器端，所以使用了'Content-Type': 'application/json'頭信息進行包裝。
該方法返回的是一個可觀察對象 (Observable)，針對可觀察對象，我們可以subscribe對應的方法，當數(shù)據(jù)返回后進行處理。
4. JSONP獲取數(shù)據(jù)
用 Angular Http 服務發(fā)起 XMLHttpRequests，是與服務器通訊時最常用的方法。但它不適合所有場景。
出于安全的考慮，網絡瀏覽器會阻止調用與當前頁面不“同源”的遠端服務器的XHR。所謂源就是 URI 的協(xié)議 (scheme) 、主機名 (host) 和端口號 (port) 這幾部分的組合。這被稱為同源策略。
為了可以向不同源的服務器發(fā)起 XHR 請求，這時候就需要支持一種老的、只讀的 ( 譯注：即僅支持 GET) 備選協(xié)議，這就是 JSONP。
為了能夠使用JSONP中的Get方法來獲取數(shù)據(jù)信息，我們把 JsonpModule 添加到 AppModule 的 imports 列表中，這樣本應用程序的任何地方都可以訪問Jsonp服務。
Angular的Jsonp服務不但通過JSONP 擴展了Http 服務，而且限制我們只能用GET請求，調用的形式如下。
get(url: string, options?: RequestOptionsArgs) : Observable
我們來看一個例子，該示例和Http Get訪問十分類似，
@Component({
selector: 'demo',
template: 'Get Data',
})
export class DemoComponent {
constructor(private jsonp: Jsonp) {
}
url: string = '/api/list';
click() {
this.jsonp.get(this.url).subscribe((data) => {
console.log(data);
});
}
} 5. 結果處理
5.1 可觀察對象
我們通過Http以及Jsonp的api接口可以知道，默認返回值都是可觀察對象 Observable< Response >?？梢园芽捎^察對象 Observable 看做一個由某些“源”發(fā)布的事件流。 通過 訂閱 到可觀察對象 Observable ，我們監(jiān)聽（subscribe）這個流中的事件。 在這些訂閱中，我們指定了當 Web 請求生成了一個成功事件 ( 有效載荷是英雄數(shù)據(jù) ) 或失敗事件 ( 有效載荷是錯誤對象 ) 時該如何采取行動，如示例中所示。
我們的服務可以返回 HTTP 響應對象Response。但這可不是一個好主意！ 數(shù)據(jù)服務的重點在于，對消費者隱藏與服務器交互的細節(jié)。其實上，我們最關心的還是獲取到的返回數(shù)據(jù)信息，這時候我們就可以利用RxJS庫來對事件流進行一些額外的處理。
RxJS("Reactive Extensions" 的縮寫)是一個被 Angular 認可的第三方庫，它實現(xiàn)了異步可觀察對象 (asynchronous observable) 模式。Rxjs庫中包含很多對事件流進行處理的方法，例如map，distinctUntilChanged等操作符。
針對返回數(shù)據(jù)是json格式的響應對象，可以把Response解析成 JavaScript 對象——只要調一下 response.json() 就可以了，這時候我們就可以利用map操作符來進行處理，例如
this.jsonp.get(this.url)
.map((rsp:Response)=>{
return rsp.json()
})
.subscribe((data) => {
console.log(data);
});5.2 Promise
雖然 Angular 的 http 客戶端 API 返回的是 Observable
this.jsonp.get(this.url)
.toPromise()
.then((rsp: Response) => {
console.log(rsp)
});以上是“Angular2中http jsonp的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
