Angular课程实验手册(五)

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

HttpClient简介

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

  1. 可测试性;
  2. 强类型的请求;
  3. 响应对象;
  4. 支持请求和响应拦截器;
  5. 使用响应式风格处理请求的异步返回;
  6. 流式错误处理

添加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(`${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)

本文标题:Angular课程实验手册(五)

文章作者:梅老师

发布时间:2019年06月24日 - 20:06

最后更新:2020年09月16日 - 08:09

原始链接:https://www.mls-tech.info/web/angular/angular-practice-manual-5/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。