Angular 4-Http服务

Angular 4提供了一个HttpClient模块，用于向远程服务器或Web API发送HTTP请求。HttpClient模块基于RxJS库，使得发送http请求和接收响应非常容易，并提供了很多功能来帮助我们处理返回结果，例如映射到一个特定的对象类型，错误处理等。在这篇文章中，我们将探讨如何使用Angular 4的HttpClient模块来发送HTTP请求。

导入HttpClient模块

要使用HttpClient模块，我们首先需要将其导入到AppModule中。在AppModule中的import语句中添加HttpClientModule：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // 添加HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

发送GET请求

HttpClient模块使用get()方法来发送GET请求。以下是一个示例，向JSONPlaceholder API发送请求，并将返回结果映射到一个用户对象数组：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

interface User {
  id: number;
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let user of users">{{user.id}} - {{user.name}}</li>
    </ul>
  `,
})
export class AppComponent implements OnInit {
  users: User[];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.getUsers().subscribe(users => this.users = users);
  }

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('https://jsonplaceholder.typicode.com/users');
  }
}

在ngOnInit()中调用getUsers()方法，该方法返回Observable<User[]>类型，表示返回一个用户对象数组。在模板中使用*ngFor指令来循环遍历用户对象数组。

发送POST请求

HttpClient模块使用post()方法来发送POST请求。以下是一个发送JSON数据并接收JSON响应的示例：

import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

interface Post {
  id: number;
  title: string;
  body: string;
  userId: number;
}

@Component({
  selector: 'app-root',
  template: `
    <form (submit)="createPost(title.value, body.value)">
      <input type="text" #title placeholder="Enter title">
      <input type="text" #body placeholder="Enter body">
      <button type="submit">Create Post</button>
    </form>
  `,
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  createPost(title: string, body: string): void {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };

    const post: Post = {title, body, userId: 1};
    this.http.post<Post>('https://jsonplaceholder.typicode.com/posts', post, httpOptions)
      .subscribe(data => console.log(data));
  }
}

在表单提交时，form的submit事件触发createPost()方法，该方法使用HttpClient的post()方法向JSONPlaceholder API发送POST请求，并将Post类型对象发送到服务器。请求头中指定Content-Type是application/json。使用subscribe()方法订阅返回结果，并在控制台中打印响应数据。

错误处理

当请求失败时，我们需要处理错误以提供用户明确的错误信息。以下是一个HTTP请求错误处理的示例：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';

interface Post {
  id: number;
  title: string;
  body: string;
  userId: number;
}

@Component({
  selector: 'app-root',
  template: `
    <button (click)="getPosts()">Get Posts</button>
    <ul>
      <li *ngFor="let post of posts">{{post.id}} - {{post.title}}</li>
      <div *ngIf="errorMessage">{{errorMessage}}</div>
    </ul>
  `,
})
export class AppComponent {
  posts: Post[];
  errorMessage: string;

  constructor(private http: HttpClient) {}

  getPosts(): void {
    this.http.get<Post[]>('https://jsonplaceholder.typicode.com/post')
      .subscribe(posts => this.posts = posts,
        error => this.errorMessage = error.message);
  }
}

getPosts()方法使用subscribe()方法来订阅Observable，请求成功则返回用户对象数组，失败则设置errorMessage值。在模板中，使用ngIf指令如果errorMessage存在，则显示错误信息。

总结

Angular 4的HttpClient模块大大简化了http请求的发送和接收响应。我们可以使用HttpHeaders指定请求头，使用get()/post()方法发送请求，使用subscribe()方法订阅返回结果，处理返回结果，以及处理错误。HttpClient模块提供了很多功能，例如：使用map()方法将返回结果映射到对象类型；使用catch()方法以处理错误。因此，使用Angular 4向远程服务器或Web API发送HTTP请求变得非常容易。