angular2 路由ajax,使用Angular2的Http發送AJAX請求

使用Angular2的Http發送AJAX請求

Angular的文檔并不詳細，甚至API文檔也有一些錯誤。經過查閱資料并經大量實驗，終于明确了Angular的Http發送Ajax請求的方式方法。本文描述了通過Angular的Http發送Ajax請求相關的全部内容。

1. Angular的Http類

Angular的Http類負責與服務端通訊，通過Ajax的形式通路遠端伺服器。

Angular的Http通路遠端伺服器，可以使用GET、POST、PUT、DELETE、OPTIONS等方法(method)。

當然，我們最常使用的是GET和POST方法。

當Angular發現你所通路的位址是跨域的，會自動發送一次OPTIONS方法的請求，确定此跨域伺服器是否支援跨域通路。若不支援跨域通路，則給出錯誤，不能執行真正的GET、POST請求。

2. 使用Angular發送GET請求

//以下是一些必須的導入

import { Http, URLSearchParams,RequestOptions } from [email protected]/http‘; //發送請求有關的類

import { Observable } from "rxjs"; //明确請求後的可觀察對象是Rx的可觀察對象，如未指明是Rx的可觀察對象，會報錯。

import ‘rxjs/add/operator/toPromise‘; //引入toPromise操作符，否則會報錯，toPromise方法未定義。//發送get請求的方法

get() : Promise{

let serverurl: string= "url位址";//建立請求參數對象，所有請求參數被放在此對象中。

let param = newURLSearchParams();

param.append("param1","test"); //向請求參數中放入參數及值

//建立請求設定對象，将請求參數作為其構造方法參數對象的"search"屬性值。

//請注意，在這裡我們并未明确請求頭(Headers)，Angular會根據請求方法(method)

//及請求參數的類型，自動确定請求頭類型。

let options = newRequestOptions({search:param});//發起get請求。注意http屬性必須由依賴注入而來。

return this.http.get(serverurl, options)

.toPromise()//将可觀察對象轉為承諾，接下來按照承諾的方式處理。

.then(response =>{

let data=response.json();if (data.is_ok == 2) {

let result:string=data.rs;

console.log(result);returnPromise.resolve(result);

}return Promise.reject("false");

}).catch(error =>{

console.log(error);return Promise.reject("false");

});

}

3. 使用Angular發送POST請求

//以下是一些必須的導入

import { Http, URLSearchParams,RequestOptions } from [email protected]/http‘; //發送請求有關的類

import { Observable } from "rxjs"; //明确請求後的可觀察對象是Rx的可觀察對象，如未指明是Rx的可觀察對象，會報錯。

import ‘rxjs/add/operator/toPromise‘; //引入toPromise操作符，否則會報錯，toPromise方法未定義。//發送Post請求的方法

postByForm(): Promise{

let serverurl: string= "url位址";//建立請求參數對象，所有請求參數被放在此對象中。

let param = newURLSearchParams();

param.append("param1","test"); //向請求參數中放入參數及值

//發起Post請求(http屬性必須由依賴注入而來)，請注意，post方法比get方法多了一個參數，多的是第2個參數。

//第1個參數是url位址，第2個參數是請求參數；

//第3個參數對應get方法的第2個參數，是請求設定(RequestOptions)對象。

//在get請求中，我們将請求參數(URLSearchParams)放在了請求設定的(RequestOptions)對象的"search"屬性中，

//在post方法中，post請求參數作為post方法的第2個參數，不能放到請求設定的(RequestOptions)對象的"search"屬性中。

//如放到了請求設定的(RequestOptions)對象的"search"屬性中，則被作為請求get參數的一部分。

//如：url位址?param1=test，

//這不是我們想要的。我們使用了post方法，即是希望在請求體的form-data部分傳輸我們的參數，

//而不希望請求參數出現在url位址上。

//在這裡，請求設定對象是個null，因為我們不需要給本次請求設定請求頭，請求頭由anglar自動計算。

return this.http.post(serverurl, param, null)

.toPromise()

.then(response=>{

let data=response.json();if (data.is_ok == 2) {

let result:string=data.rs;

console.log(result);returnPromise.resolve(result);

}return Promise.reject("false");

}).catch(error =>{

console.log(error);return Promise.reject("false");

});

}

4. 使用Angular以FormData對象作為參數發送POST請求

FormData是 XMLHttpRequest Level 2 新增的一個對象，在IE10及以上版本受支援，其他浏覽器的新版本基本都支援。

FormData的結構就是一組鍵值對，鍵名是參數名，鍵值是參數值。它最大的特點是支援二進制流，是以我們使用FormData主要是用AJAX技術上傳檔案。上傳檔案時，檔案是FormData中的一組鍵值對，除了檔案以外的參數，也可以被放到FormData中一并送出給伺服器。

//以下是一些必須的導入

import { Http, URLSearchParams,RequestOptions } from [email protected]/http‘; //發送請求有關的類

import { Observable } from "rxjs"; //明确請求後的可觀察對象是Rx的可觀察對象，如未指明是Rx的可觀察對象，會報錯。

import ‘rxjs/add/operator/toPromise‘; //引入toPromise操作符，否則會報錯，toPromise方法未定義。//發送Post請求的方法

postByFormData(): Promise{

let serverurl: string= "url位址";

let param= newFormData();//放入要上傳的檔案

let file = this.fileElement.nativeElement.files[0];

param.append("file",file);//放入其他參數

param.append("param1","test");//發送post請求(http屬性必須由依賴注入而來)，可以看到，除了第二個參數param的類型為FormData外，其餘參數與普通post請求一緻。

//angular會自動計算請求頭類型。

return this.http.post(serverurl, param, null)

.toPromise()

.then(response=>{

let data=response.json();if (data.is_ok == 2) {

let result:string=data.rs;

console.log(result);returnPromise.resolve(result);

}return Promise.reject("false");

}).catch(error =>{

console.log(error);return Promise.reject("false");

});

}

原文：https://www.cnblogs.com/wjw1014/p/10479191.html