Angular 4.3 HttpClient (Angular访问 REST Web 服务) 二、Http 请求结果类型转换与错误处理

Http Get响应（Response）类型转换

接着上一节。
1。在浏览器控制台中可以看到响应的JSON对象有许多属性（properties）。如果试着用data.login访问login属性会报错。
console.log(data.login);
因为Get返回的是Object类型。
Angular get原型
typescript
get(url: string,options?: {
headers?: HttpHeaders | {
[header: string]: string | string[];
};
observe?: 'body';
params?: HttpParams | {
[param: string]: string | string[];
};
reportProgress?: boolean;
responseType?: 'json';
withCredentials?: boolean;
}): Observable<Object>;

2。转换响应的object对象为自定义对象：
2.1 自定义类型UserResponse :

import { Component,OnInit } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  results = '';

  constructor(private http: HttpClient){
  }
  ngOnInit(): void {
    this.http.get<UserResponse>('https://api.github.com/users/seeschweiler').subscribe(data => {
      //console.log(data);
      console.log("User Login: " + data.login);
      console.log("Bio: " + data.bio);
      console.log("Company: " + data.company);
    });
  }
}
interface UserResponse {
  login: string;
  bio: string;
  company: string;
}

错误处理

1。由于一些可预见或不可预见的状况，会导致 HTTP失败。因此应该总是有处理这些错误状况的代码存在。 Get的subscribe方法有两个参数 未回调函数，用于处理Get成功与失败的情况。
subscribe方法原型

subscribe(next?: (value: T) => void,error?: (error: any) => void,complete?: () => void): Subscription;

失败处理

this.http.get<UserResponse>('https://api.github.com/users/seeschweiler').subscribe(
      data => {
        console.log("User Login: " + data.login);
        console.log("Bio: " + data.bio);
        console.log("Company: " + data.company);
      },//新增失败处理
      err => {
        console.log("Error occured.")
      }
    );

2。失败详细信息：错误处理回调函数参数类型是any，可将其转换为HttpErrorResponse类型，并可获取更多错误属性信息。 HttpErrorResponse 需要从@angular/common/http导入才能使用。
完整app.component.ts

import { Component,OnInit } from '@angular/core';

import { HttpClient } from '@angular/common/http';
import {HttpErrorResponse} from '@angular/common/http';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  results = '';

  constructor(private http: HttpClient){
  }
  ngOnInit(): void {
    this.http.get<UserResponse>('https://api.github.com/users/seeschweiler').subscribe(data => {
      console.log(data);
      console.log("User Login: " + data.login);
      console.log("Bio: " + data.bio);
      console.log("Company: " + data.company);
    },(err: HttpErrorResponse) => {
      if (err.error instanceof Error) {
        console.log("Client-side error occured.");
      } else {
        console.log("Server-side error occured.");
      }
    }
  );
  }
}
interface UserResponse {
  login: string;
  bio: string;
  company: string;
}