使用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 '@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