# 对接后台 在C层中成功的获取到我们想到的数据以后，接下来我们开始对接后台。 ## API API是个再熟悉不对的单词，英文全称为：Application Interface，即应用程序接口。在前后分离的情况下，API文档便是前台与后台沟通的核心文档。在我们当前的项目中，API便指前台与后台进行数据交互的规范。在API中规定了数据交互的地址、方法以及数据格式等。 前台在后台发起请求时，要严格的按照后台的API文档进行操作，以最大限度的规避在与后台对接中可能发生的问题。 当前新建教师的API如下： API请求地址为：`http://angular.api.codedemo.club:81` ```http POST /teacher ``` 上述信息传递了两条信息： - 请求的方法为 POST - 请求的实际地址为`API请求地址 + /teacher`，即：`http://angular.api.codedemo.club:81/teacher` 同时在请求方法为POST的前提下，后台还为我们提供了如下信息： | **类型Type** | **名称Name** | **描述Description** | **类型Schema** | | ------------ | ------------ | ------------------- | ------------------------------------------------------------ | | Body | teacher | 新建教师 | `{username: string, name: string, email: string, sex: boolean}` | | Response | 成功 | Status Code: 201 | `{id: number, username: string, name: string, email: string, sex: boolean}` | 上述信息向我们传递了： - POST请求时需要将请求的教师以`{username: string, name: string, email: string, sex: boolean}`的JSON形式传递给后台。 - 当后台处理成功时，将返回状态码为201的响应信息，响应信息中将回传`{id: number, username: string, name: string, email: string, sex: boolean}`格式的教师。 ## 依赖注入 发起HTTP请求，则需要HttpClient的帮助，我们在组件的构造函数中声明对其的依赖如下： ``` - constructor() { + constructor(private httpClient: HttpClient) { } ``` 此时，`ng t`将得到一些错误，请参考2.2小节解决该错误继续学习。 ## POST请求 post请求与get请求大同小异，不同的是在发起post请求时可以在请求主体中携带更多数据。我们在onSubmit方法中补充相关代码： ```typescript onSubmit(): void { console.log(this.teacher); + this.httpClient + .post('http://angular.api.codedemo.club:81/teacher', this.teacher) + .subscribe((result) => { + console.log('接收到返回数据', result); + }); } ``` - ★ post请求时接收两个参数 ，第二个参数为向后台发送的主体数据，在此我们需要发送的数据为预保存的教师。 这已经是我们第二次使用`httpClient`这个对象了，它之所以看起来能够一直调用个不停，是由于在调用过程大概发生了如下事件： ```javascript /** * 拥有subscribe方法的对象 **/ var objectWithSubscribe = { subscribe: function(cb) { cb('这里是即将返回的数据'); } } /** * 拥有post方法的httpClient对象 **/ var httpClient = { // 该对象中拥有post方法 post: function (url, data) { console.log('url', url); console.log('data', data); // 该方法返回了objectWithSubscribe对象 return objectWithSubscribe; } } httpClient .post('http://angular.api.codedemo.club:81/teacher', {name: '张三'}) .subscribe((result) => { console.log('接收到返回数据', result); }); ``` 执行结果如下：  填写教师信息后，点击发起请求按钮，请求成功并在控制台获取到如下信息：  如果你也在使用`wangwu`做为教师的用户名，则可能会引发用户名冲突的错误，此时变更一个没有被其它同学占用的用户名即可。 ### 错误处理 正常的业务逻辑都会对数据进行逻辑校验，比如：在一个系统中可能不会有两个用户名相同的用户。所以将我们新建一个用户名为`zhangsan` 的教师，再次用`zhangsan`来创建新教师时，则应该得到相应的错误信息。 做为最佳实践的Angular当然想到了这一切，当请求后台发生错误时，我们可以使用如下代码来获取相应的错误信息： ```typescript this.httpClient.get('url') .subscribe(() => {}➊, () => {}➋); ``` - ➊ 请求成功时，调用本函数 - ➋ 请求失败时，调用本函数 我们尝试将上述方法添加到Add组件的`ngOnInit`方法中，并尝试请求一个并不存在的地址，以测试请求失败时是否能够成功的获取到错误信息。 ```typescript ngOnInit(): void { + this.httpClient.get('someUnKnownHost') + .subscribe(() => {}, (error) => { console.log('请求失败', error); }); } ``` 对代码进行格式化后如下： ```typescript ngOnInit(): void { this.httpClient.get('someUnKnownHost') .subscribe(() => { }, (error) => { console.log('请求失败', error); }); } ``` 控制台如下：  在控制台的打印信息中，我们点击如上图圆圈所示的箭头，可以查看到具体的错误的详细信息。在错误信息中，我们主要观察`status`字段，在大多数时候我们都可以根据该`status`字段快速的获知错误的类型。比如上述错误代码为404，表示`所要请求的地址不存在`。 接下来我们恢复刚刚在`ngOnInit()`方法中添加的测试代码，同时在`onSubmit`方法中添加数据请求错误的相关代码： ```typescript 👉 --- a/first-app/src/app/add/add.component.ts 👉 +++ b/first-app/src/app/add/add.component.ts 👉 @@ -18,11 +18,6 @@ export class AddComponent implements OnInit { } ngOnInit(): void { - this.httpClient.get('someUnKnownHost') - .subscribe(() => { - }, (error) => { - console.log('请求失败', error); - }); } onSubmit(): void { 👉 @@ -31,6 +26,8 @@ export class AddComponent implements OnInit { .post('http://angular.api.codedemo.club:81/teacher', this.teacher) .subscribe((result) => { console.log('接收到返回数据', result); + }, (error) => { + console.log('请求失败', error); }); } } ``` - 被标识为 👉 的为对比文件前后变化的**辅助信息**，起查看的辅助作用。在进行代码查看时，重点仍然为被标识为`+`或`-`的代码行。 然后向后台再次以`wangwu`为用户名发起请求：  此时我们将得到一个状态码为`409`的错误响应信息。该状态码由开发此小伙伴的同学定义，原则上他可以定义任何状态，此时状态码`409`表示：请求发生冲突，在此意为：当前已存在用户名为`wangwu`的教师。在定义状态码时，为了减少沟通成本，一般情况我们都会遵守这些国际规则， - 2xx 请求成 - 3xx 请求的资源已转移 - 4xx 用户发起了不合乎规则的数据 - 5xx 服务器发生了异常 ## 小结 我们在本章中学习了如果查看后台定义的api规范，学会如何获取发起请求时的错误信息，接触了文件前后对比的更标准的方法以及初步的认识了请求状态码。 ## 本节作业 1. 我们在展示文件前后的异同时使用了一个叫做`git`的伟大软件，请了解该软件的产生背景及作用。 2. 请搜索在文件的前后对比展中出现的`@@ -18,11 +18,6 @@`辅助信息具体代码的含义。 3. `httpClient().subscribe`除可以同时接收`成功`,`失败`的回调函数外，还可以接收第三个参数，其类型仍然为`回调函数`，请测试在请求成功、请求失败时第三个函数的功能。 | 名称 | 地址 | 备注 | | ------------------------ | ------------------------------------------------------------ | ---- | | Http状态码 | [https://www.runoob.com/http/http-status-codes.html](https://www.runoob.com/http/http-status-codes.html) | | | HTTP 方法：GET 对比 POST | [https://www.runoob.com/tags/html-httpmethods.html](https://www.runoob.com/tags/html-httpmethods.html) | | | RxJS Observer | [https://rxjs-dev.firebaseapp.com/guide/observer](https://rxjs-dev.firebaseapp.com/guide/observer) | | | 本节源码 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.3.3.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.3.3.zip) | |