在本系列的上一篇文章中,我们使用服务构件,将获取待办事项列表的逻辑从组件(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, 完整代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| 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 来访问后端服务, 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| 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(`#123;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 函数, 代码如下:
1 2 3 4 5 6 7 8
| this.todoSrv.getTasks().subscribe(res => { if (res['succ']) { this.tasks = res['data']; } else { alert(res['msg']) } })
|
因为所有后台接口都返回同样的数据结构:
1 2 3 4 5 6
| { succ: True | False, code: '', msg: '', data: Json | JsonArray }
|
因此的处理代码也是基本相同的,首先通过 succ 属性判断调用在逻辑上是成功,如果成功,则从 data 中取返回的数据,如果出错,则从 code 和 msn 属性中获取错误编号和错误信息。
上面三步都改好以后,在命令行运行 ng serve, 启动应用,用浏览器访问 http://localhost:4200 就可以看到从后台返回的数据了。
下一步
做到这里,我们已经学习并实践了在Angular中,建立单个界面所需要的基础知识。在下一篇文章中,我们将引入多个接界面,并在多个界面间切换(routing)