使用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 '@angular/http'; // 發送請求有關的類
import { Observable } from "rxjs"; // 明確請求后的可觀察對象是Rx的可觀察對象，如未指明是Rx的可觀察對象，會報錯。
import 'rxjs/add/operator/toPromise'; // 引入toPromise操作符，否則會報錯，toPromise方法未定義。
// 發送get請求的方法
get() : Promise<string> {
    let serverurl: string = "url地址";
    // 創建請求參數對象，所有請求參數被放在此對象中。
    let param = new URLSearchParams();
    param.append("param1","test"); // 向請求參數中放入參數及值
    // 創建請求設置對象，將請求參數作為其構造方法參數對象的"search"屬性值。
    // 請注意，在這里我們並未明確請求頭（Headers），Angular會根據請求方法（method）
    // 及請求參數的類型，自動確定請求頭類型。
    let options = new RequestOptions({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);
            return Promise.resolve(result);
        }
        return Promise.reject("false");
    }).catch(error => {
        console.log(error);
        return Promise.reject("false"); 
    });
}

 

3. 使用Angular發送POST請求

// 以下是一些必須的導入
import { Http, URLSearchParams,RequestOptions } from '@angular/http'; // 發送請求有關的類
import { Observable } from "rxjs"; // 明確請求后的可觀察對象是Rx的可觀察對象，如未指明是Rx的可觀察對象，會報錯。
import 'rxjs/add/operator/toPromise'; // 引入toPromise操作符，否則會報錯，toPromise方法未定義。
// 發送Post請求的方法
postByForm(): Promise<string> {
    let serverurl: string = "url地址";
    // 創建請求參數對象，所有請求參數被放在此對象中。
    let param = new URLSearchParams();
    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);
            return Promise.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 '@angular/http'; // 發送請求有關的類
import { Observable } from "rxjs"; // 明確請求后的可觀察對象是Rx的可觀察對象，如未指明是Rx的可觀察對象，會報錯。
import 'rxjs/add/operator/toPromise'; // 引入toPromise操作符，否則會報錯，toPromise方法未定義。
// 發送Post請求的方法
postByFormData(): Promise<string> {
    let serverurl: string = "url地址";
    let param = new FormData();
    // 放入要上傳的文件
    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);
            return Promise.resolve(result);
        }
        return Promise.reject("false");
    }).catch(error => {
        console.log(error);
        return Promise.reject("false");
    });
}

 

 

 

版權聲明：本博文參考自 - https://blog.csdn.net/xin_bao_long/article/details/82798328