## 模拟数据 我们在`src/assets`文件夹中建立如下一个`teacher-all.json`文件，以模拟一个在良好网络环境下的后台回传数据。  ```json [ { "id": 1, "name": "张三", "username": "zhangsan", "email": "zhangsan@yunzhiclub.com", "sex": true }, { "id": 2, "name": "李四", "username": "lisi", "email": "lisi@yunzhiclub.com", "sex": false } ] ``` * **注意** JSON文件的格式更加严格，每个属性都需要使用`""`包裹。 ### karma Angular的单元测试使用了强大的`karma`，在当前Angular版本`ng t`的情况下，HttpClient若要请求本地`/src/assets`中的`json`文件，则还需要配置karma.conf.js： ```bash . ├── README.md ├── angular.json ├── e2e ├── karma.conf.js 😀 ├── node_modules ├── package-lock.json ├── package.json ├── src ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ``` 配置前第13至16行： ```json require('@angular-devkit/build-angular/plugins/karma') ], client: { jasmine: { ``` 配置后第13至22行： ```json require('@angular-devkit/build-angular/plugins/karma') ], files: [ {pattern: './src/assets/**', watched: true, included: false, nocache: false, served: true} ], proxies: { '/assets/': '/base/src/assets/' }, client: { jasmine: { ``` >[info] 上述配置无需掌握，不同的Angular版本处理也不同。 随便我们重启`ng t`后继续学习。 ## ngOnInit 在Angular中，推荐我们将组件初始化成功后执行的一些方法放到`ngOnInit()`中。Angular在组件初始化的过程中检测组件是否存在`ngOnInit()`，如果存在则自动完成调用。 ```typescript constructor(private httpClient: HttpClient) { console.log(httpClient); } /** * 组件初始化完成后将被自动执行一次 */ ngOnInit(): void { console.log('on init'); } } ``` 同时Angular官方推荐我们在组件中一旦声明了`ngOnInit()`，则需要在类上实现`OnInit`接口： ```typescript import {Component, OnInit} from '@angular/core'; ... export class AppComponent implements OnInit { ``` ## 生命周期 我们在2.1.2中曾这么描述生命周期： ``` angular组件在前期大体是如下构建的：❶ 执行构造函数，实例化组件实例；❷ 解析V层代码； ``` 加入本节的`ngOnInit()`方法后，上述周期将被更精确的修正为： * ❶ 执行构造函数，实例化组件实例； * ❷ 检测是否存在`ngOnInit()`方法，有则执行一次。 * ❸ 解析V层代码； * ❹ 解析在V层中使用的变量。 >[info] 所谓组件的生命周期，就是组件从出生到销毁的整个过程。 ## 发起请求 HttpClient提供了`get`方法来实现`json`文件的**预**请求： ```typescript ngOnInit(): void { this.httpClient.get('assets/teacher-all.json'); } ``` 之所以称为**预**请求，是由于上述代码的实际作用是定义了一个请求信息，而并未发起真正的请求。这就像现实生活的**预售**，只有当广大人民群众付了款商人们才会去进行真正的生产。HttpClient借鉴了这种模式，只有当其被**订阅**时，才会真正的发起请求： ```typescript ngOnInit(): void { this.httpClient.get('assets/teacher-all.json') .subscribe(); } ``` 打开chrome控制台中的网络选项卡，请求信息显示如下：  ## 获取请求值 javascript认为发起http请求这种操作必然是**耗时**的，所以在此操作上引入了**异步**与**回调**，我们简单的看到其具体的用法，在后续的章节中再继续讲解。 ```typescript this.httpClient.get('assets/teacher-all.json') .subscribe((teachers❶) => { console.log(teachers); }); ``` * 当请求得到的数据放到❶中  上述代码相当于在`subscribe()`中传入了一个方法: ```typescript ngOnInit(): void { // 定义一个方法，起名为callback const callback = (teachers: any❶): void => { console.log(teachers); }; // 将callback传入至subscribe this.httpClient.get<any❶>('assets/teacher-all.json') .subscribe(callback); } ``` * ❶ 注意这两处的类型使用any  实际上`HttpClient`成功发起请求后，调用了传入`subscribe()`的`callback`方法，并将请求得到的数值赋值给`callback`的`teachers`变量。 在习惯上我们更愿意如下书写： ```typescript this.httpClient.get('assets/teacher-all.json') .subscribe((teachers) => { console.log(teachers); }); ``` 由于该方法仅有一个参数，所以还可以去除参数左右的`()`，被缩写为： ```typescript this.httpClient.get('assets/teacher-all.json') .subscribe(teachers => { console.log(teachers); }); ``` 又由于该方法体中仅有一行代码，所以还可以去除代码左右的`{}`、代码后方的`;`，近一步缩写为: ```typescript this.httpClient.get('assets/teacher-all.json') .subscribe(teachers => console.log(teachers) ); ``` 在代码不长的情况下，有时候也会被书写为一行： ```typescript this.httpClient.get('assets/teacher-all.json') .subscribe(teachers => console.log(teachers)); ``` ## 重新渲染 下面让我们删除原C层中teachers初始化的代码，删除C层冗余的title属性，C层代码最终如下： ```typescript export class AppComponent implements OnInit { // 初始化教师数组 teachers = []; constructor(private httpClient: HttpClient) { console.log(httpClient); } /** * 组件初始化完成后将被自动执行一次 */ ngOnInit(): void { this.httpClient.get('assets/teacher-all.json') .subscribe(teachers => console.log(teachers)); } } ```  接着将发起HTTP请求获取到的数据赋值给当前组件的`teachers`属性： ```typescript ngOnInit(): void { this.httpClient.get<[]>❶('assets/teacher-all.json') .subscribe(teachers => this.teachers = teachers❷); } ``` * ❶ 注意在此需要声明HTTP请求返回的类型 * ❷ 将请求到的数据赋值给组件的teachers属性  # 本节作业 ```typescript ngOnInit(): void { this.httpClient.get('assets/teacher-all.json') .subscribe(); } ``` 上述代码如果不执行`subscribe()`则不会发生请求。 你该如何验证上述猜想。 # 资源列表 | 名称 | 地址 | |---- | ---- | | 组件生命周期顺序 | [https://www.angular.cn/guide/lifecycle-hooks#lifecycle-event-sequence](https://www.angular.cn/guide/lifecycle-hooks#lifecycle-event-sequence) | 本节源码 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.2.2.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.2.2.zip)