Angular2中Http请求原理与用法详解

1. Http请求原理

Angular2中的Http请求是基于XMLHttpRequest API实现的，它使用了RxJS的Observable来处理异步请求的结果。在发送请求时，可以通过选项参数进行请求配置，例如设置请求方式、请求头等。在接收响应时，可以通过RxJS的操作符（map、filter、catch等）对响应结果进行处理，最终返回Observable对象。

2. Http模块和服务

在Angular2中，Http请求相关的模块和服务都在@angular/http中定义。要使用Http请求功能，必须在模块或组件中先导入HttpModule模块，并在组件构造函数中注入Http服务。

import { HttpModule, Http } from '@angular/http';

@NgModule({
  imports: [HttpModule],
  // ...
})
export class AppModule { }

export class MyComponent {
  constructor(private http: Http) {
    // ...
  }
}

3. 发送GET请求

在Angular2中发送GET请求非常简单，只需要调用http.get()方法，传入请求地址和请求选项即可。get()方法会返回一个Observable对象，可以通过RxJS的操作符对响应结果进行处理。

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  // ...
})
export class MyComponent {
  constructor(private http: Http) {
    this.http.get('https://jsonplaceholder.typicode.com/posts/1')
      .subscribe(response => {
        console.log(response.json());
      });
  }
}

上面的示例中，我们向https://jsonplaceholder.typicode.com/posts/1发送了一个GET请求，并通过subscribe()方法监听响应结果。响应结果是一个Response对象，可以通过json()方法将响应体转换为JSON对象。

4. 发送POST请求

与GET请求类似，发送POST请求也只需要调用http.post()方法即可。需要注意的是，在POST请求中要传递请求体，可以通过URLSearchParams对象或JSON对象来设置请求体。同样，post()方法会返回一个Observable对象，可以通过RxJS的操作符对响应结果进行处理。

下面是一个使用URLSearchParams对象发送POST请求的示例：

import { Component } from '@angular/core';
import { Http, URLSearchParams } from '@angular/http';

@Component({
  // ...
})
export class MyComponent {
  constructor(private http: Http) {
    const params = new URLSearchParams();
    params.set('username', 'test');
    params.set('password', '123456');

    this.http.post('https://jsonplaceholder.typicode.com/posts', params.toString())
      .subscribe(response => {
        console.log(response.json());
      });
  }
}

上面的示例中，我们向https://jsonplaceholder.typicode.com/posts发送了一个POST请求，并通过URLSearchParams对象设置了请求体。在发送请求时，必须将URLSearchParams对象转换为字符串，并将其传递给post()方法。最终响应结果同样也会通过subscribe()方法返回Observable对象。

5. 总结

Angular2中的Http请求功能非常强大，不仅支持常见的请求方式(GET、POST)，还可以通过选项参数进行参数设置和RxJS的操作符进行响应结果处理。在使用Http请求时，需要先导入HttpModule模块，并在组件构造函数中注入Http服务。对于GET请求和POST请求的示例，上面已经讲解得非常详细了。