# MockApi 簡單的事情重復做，你就是專家。既然MockApi是生產環境中重要的一環，那讓我們以教師列表為例，簡單的重復一次吧。 ## 繼續上節 在上個小節中，由于我們并沒有在MockApi攔截器中加入對`GET /teacher`的模擬，所以在MockApi的支持下，對`/teacher`的`get`模擬請求會報如下錯誤：  上述提示在說：沒有匹配到方法為`GET`，請求地址為`teacher`的模擬接口。接下來參考模擬新建班級的模擬API ，我們創建一個模塊獲取教師列表的API。 ### 初始化 為了與班級模擬API加以區分，我們新建一個`TeacherMockApi`，同時實現`MockApiInterface`以表明其身份為**后臺模擬API**： ```typescript +++ b/first-app/src/app/clazz/add/add.component.mock-api.spec.ts @@ -73,3 +73,12 @@ class ClazzMockApi implements MockApiInterface { ]; } } + +/** + * 教師模擬API + */ +class TeacherMockApi implements MockApiInterface { + getInjectors(): ApiInjector<any>[] { + return []; + } +} ``` 然后在`getInjectors`的返回數組中增加**教師列表**一項： ```typescript +++ b/first-app/src/app/clazz/add/add.component.mock-api.spec.ts @@ -79,6 +79,20 @@ class ClazzMockApi implements MockApiInterface { */ class TeacherMockApi implements MockApiInterface { getInjectors(): ApiInjector<any>[] { - return []; + return [{ + // 獲取所有教師 + method: 'GET', + url: 'teacher', + result: [ + { + id: randomNumber(), + name: '教師姓名1' + }, + { + id: randomNumber(), + name: '教師姓名2' + } + ] + }]; } } ``` ### 添加至攔截器 最后，把上述模擬API添加到當前動態測試模塊的`MockApiInterceptor`中： ```typescript +++ b/first-app/src/app/clazz/add/add.component.mock-api.spec.ts @@ -17,7 +17,7 @@ describe('clazz add with mockapi', () => { { provide: HTTP_INTERCEPTORS, multi: true, - useClass: MockApiInterceptor.forRoot([ClazzMockApi]) + useClass: MockApiInterceptor.forRoot([ClazzMockApi, TeacherMockApi]) } ] }).compileComponents(); ``` ### 測試 使用`ng t`啟動測試：  當點擊教師姓名時，`teacherId`也會隨著變化，成功！ ## 本節作業 請改寫`TeacherMockApi`中的`result` 上的相關代碼，使其返回20個模擬教師。 | 名稱 | 地址 | | -------- | ------------------------------------------------------------ | | 本節源碼 | [[https://github.com/mengyunzhi/angular11-guild/archive/step6.1.6.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.1.6.zip) |