Angular提供了可用于發起http請求的HttpClient，本節我們嘗試將其引入到C層app.component.ts中，并在下一節中使用其發起對json文件的請求，以模擬向后臺發起請求。 ## 引入HttpClient 與其它面向對象的編程思想相同，我們若想在某個類中引用另外一個類，通常將其放到構造函數中，然后在實例化當前類的時候類似使用以下代碼即可： ```C++ // 實例化被依賴的類 B b = new B(); // A依賴于B，將b做為構造函數的參數傳入 A a = new A(b); ``` 在Angular中也是這么做的，打開C層app.component.ts文件： ```typescript constructor(private httpClient?: HttpClient?) { console.log(httpClient); ?? } ``` * typescript有個小特性，即在聲明方法中的變量時，先寫變量名?，后寫變量類型? * ?? 第一次使用某種特性時，隨手打印一下變量的值是個值得保持的好習慣 注意有兩個HttpClient供我們選擇，我們選擇住在`@angular/common/http`中的這個：  我們在上面代碼的構造函數的參數前加入了聲明**可見性**的關鍵字`private`，這也是TypeScript的一個特性，上述代碼等價于： ```typescript private httpClient: HttpClient; ? ... constructor(httpClient: HttpClient) { this.httpClient = httpClient; ? console.log(httpClient); } ``` * 在構造函數中聲明**可見性**，可以使我們少寫??兩行代碼，所以我們更愿意這樣使用。當然了，你將private換成public以及protected也是完全可以的。 ### 測試 使用`ng t`來啟動項目，將得到如下錯誤：  該錯誤是在提示我們：在組件AppComponent對應的測試文件app.component.spec.ts中被描述為`should create the app`的測試方法發生了錯誤。打開app.component.spec.ts后，我們修正如下代碼來驗證一下： ```typescript it('should create the app', () => { ? it('組件初始化', () => { ? ``` * ? 刪除本行 * ? 增加本行 >[danger] ? 表示刪除該行，? 表示增加該行。后續教程中將不再進行特別說明。  接下來我們看更為重要的錯誤內容： ``` NullInjectorError: R3InjectorError(DynamicTestModule)[HttpClient -> HttpClient]: NullInjectorError: No provider for HttpClient! ``` 作為新手我們常常犯的錯誤：忽略最最關鍵的報錯信息而去盲目的盯代碼去找錯誤。實踐證明，**忽略報錯信息是降低排錯效率最有效的手段，沒有之一**。鑒于此，當發生錯誤時，我們第一時間做的應該是靜下心來翻譯一下這個錯誤，嘗試著理解一下。 >[danger] **忽略報錯信息是降低排錯效率最有效的手段，沒有之一** 由于這并不是英文考試，所以翻譯的目的是理解，也不是要求語法、語序合理。按該標準翻譯如下： ``` Null注入異常：R3注入器異常（動態測試模塊）[HttpClient -> HttpClient]: Null注入器異常：沒有找到HttpClient的提供者 ``` 由于我們前面僅僅是在構造函數中聲明了HttpClient，所以在此可以非常輕易的得出：該找不到提供者的錯誤是由于變更構造函數造成的。 ## 引入HttpClientModule `HttpClient`住在`HttpClientModule`中，若想在app.component.spec.ts成功實例化一個AppComponent，則需要在測試文件app.component.spec.ts中引入`HttpClientModule`。 ```typescript import {HttpClientModule} from '@angular/common/http'; ? ... describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ RouterTestingModule, ? HttpClientModule ? ], declarations: [ AppComponent ], }).compileComponents(); }); ``` * ? 聲明HttpClientModule住在位置 * ? 這會多一個`,`，少了會報語法錯誤 * ? 引入擁有`HttpClient`的`HttpClientModule` > [danger] **注意**：在后續的教程中，在添加相關代碼時，類似需要在?處添加一個`,`的情況還有很多， 請勿必注意觀察。  # 本節作業 錯誤信息是根據app.component.spec.ts生成的，你還能像修改`it('should create the app', () => { `一樣，修改app.component.spec.ts中的其它位置來改變其描述信息嗎？ # 資源列表 | 名稱 | 地址 | |---- | ---- | | 服務器通訊的準備工作 | [https://www.angular.cn/guide/http#setup-for-server-communication](https://www.angular.cn/guide/http#setup-for-server-communication) | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.2.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.2.1.zip)