# 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) |