Angular课程实验手册（五）

在本系列的上一篇文章中，我们使用服务构件，将获取待办事项列表的逻辑从组件(app.component.ts)中移到了服务(todo-srv.service.ts)中，并通过 rxjs 的 of 函数，返回了包含待办事项列表的 Observable 接口。本文继续深化应用开发，学习如何在 Angular 中访问后台的Rest接口，完成从真实的后台获取待办事项列表。

HttpClient简介

在Angular框架中，内置了一个HTTP客户端: HttpClient类，帮助开发者快速、简洁的事项访问后端服务的代码，提高开发效率。HttpClient基于浏览器提供的 XMLHttpRequest 接口，但提供了更强大的功能，包括:

可测试性；
强类型的请求；
响应对象；
支持请求和响应拦截器；
使用响应式风格处理请求的异步返回；
流式错误处理

添加HttpClientModule模块

用使用 HttpClient，我们首先需要引入 HttpClientModule。

打开app.modules.ts文件，在文件头部加入对 HttpClientModule 的引入，然后在 NgModule 的 imports 属性中，加入 HttpClientModule，完整代码：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/layout/header/header.component';
import { CardComponent } from './components/widget/card/card.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    CardComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

修改服务类

打开 todo-srv.service.ts 文件，删除原有模拟数据的定义(tasks)，改变 getTasks 函数的逻辑，使用 HttpClient 来访问后端服务, 代码如下：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { of } from 'rxjs';

import { Todo } from '../models/todo';

@Injectable({
  providedIn: 'root'
})
export class TodoSrvService {

  BASE_URL =  'https://uat-1.hohistar.com.cn';

  token = '0123456789';

  constructor(private http: HttpClient) { }

  getTasks() {
    const headers = new HttpHeaders().set('--auth-token--', this.token).set('Content-Type', 'application/json');
    const options = {headers: headers};

    return this.http.post(`${this.BASE_URL}/api/todos/list`, {}, options);
  }

}

为了配合课程，我在公网上部署了一个Rest服务（基地址为: https://uat-1.hohistar.com.cn ），获取待办事项列表是其中一个api, 因为部署在公网，学员可以访问该服务，随时进行app的调试。
接口地址： api/todos/list
body参数： (无参数)
header参数： 1. ‘Content-Type’, ‘application/json’ 2. ‘–auth-token–’: 当前用户的token

因为我们现在还没有实现登录功能，因此先写死 token 的值为: 0123456789

修改界面代码

打开 app.component.ts 文件，修改 ngOnInit 函数, 代码如下:


this.todoSrv.getTasks().subscribe(res => {
  if (res['succ']) {
    this.tasks = res['data'];
  } else {
    alert(res['msg'])
  }
})

因为所有后台接口都返回同样的数据结构：

{
    succ: True | False,
    code: '',
    msg: '',
    data: Json | JsonArray
}

因此的处理代码也是基本相同的，首先通过 succ 属性判断调用在逻辑上是成功，如果成功，则从 data 中取返回的数据，如果出错，则从 code 和 msn 属性中获取错误编号和错误信息。

上面三步都改好以后，在命令行运行 ng serve, 启动应用，用浏览器访问 http://localhost:4200 就可以看到从后台返回的数据了。

下一步

做到这里，我们已经学习并实践了在Angular中，建立单个界面所需要的基础知识。在下一篇文章中，我们将引入多个接界面，并在多个界面间切换（routing）