## 模擬數據 我們在`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)