Angular 从入坑到挖坑 - HTTP 请求概览 (3)

4.1.3、提交数据到服务端

在同后端接口进行交互时，获取数据一般用的是 get 请求，而当进行数据新增、更新、删除时则会使用 post、put、delete 这三个 HTTP 谓词

在毒鸡汤这个接口中，可以使用 post 方式调用 https://api.tryto.cn/djt/submit 进行毒鸡汤的提交

根据 postman 的调用示例，在服务中定义一个方法用来提交毒鸡汤信息，这里的 SetQuotesResponseModel 为接口返回的响应对象

import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; // 引入 HttpClient 类 import { HttpClient, HttpResponse } from '@angular/common/http'; // 引入接口响应类 import { SetQuotesResponseModel } from '../interfaces/set-quotes-response-model'; @Injectable({ providedIn: 'root' }) export class AntiMotivationalQuotesServicesService { // 通过构造函数注入的方式依赖注入到使用的类中 constructor(private http: HttpClient) { } /** * 提交毒鸡汤信息 * @param content 毒鸡汤 */ submitAntiMotivationalQuote(content: string): Observable<SetQuotesResponseModel> { const url = 'http://api.tryto.cn/djt/submit'; return this.http.post<SetQuotesResponseModel>(url, { content }); } }

因为这里是以默认的表单提交的方式进行的数据提交，当后端需要修改请求的 body 格式时，则需要我们修改请求的 MIME 类型

当需要更改请求的 MIME 类型或是需要添加授权访问的 token 信息这一类的操作时，需要在使用 HttpClient 提供的请求方法时添加上 HTTP 请求头配置信息

import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; // 引入 HttpClient 类 import { HttpClient, HttpResponse, HttpHeaders } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class AntiMotivationalQuotesServicesService { // 通过构造函数注入的方式依赖注入到使用的类中 constructor(private http: HttpClient) { } public httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Authorization': 'token' }) }; /** * 修改请求头信息 */ submitWithOptions() { const url = ''; return this.http.post(url, { data: '' }, this.httpOptions); } } 4.2、捕获错误信息 4.2.1、获取错误信息

在涉及到前后端交互的过程中，不可避免会出现各种状况，在出现错误时，可以在 subscribe 方法中，添加第二个回调方法来获取错误信息

getQuotes() { this.services.getAntiMotivationalQuotes().subscribe((response: GetQuotesResponseModel) => { this.quoteResponse = response; }, error => { console.error(error); }); }

在处理错误信息的回调方法中，方法返回了一个 HttpErrorResponse 对象来描述错误信息

因为这里的错误更多是服务在与后端进行通信产生的错误，因此对于错误信息的捕获和处理更应该放到服务中进行，而在组件处仅显示错误提示

在服务中定义一个错误处理器，用来处理与后端请求中发生的错误

import { Injectable } from '@angular/core'; import { Observable, throwError } from 'rxjs'; import { catchError, retry } from 'rxjs/operators'; // 引入 HttpClient 类 import { HttpClient, HttpResponse, HttpHeaders, HttpErrorResponse } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class AntiMotivationalQuotesServicesService { // 通过构造函数注入的方式依赖注入到使用的类中 constructor(private http: HttpClient) { } /** * 通过 get 请求获取毒鸡汤信息 */ getAntiMotivationalQuotes(): Observable<GetQuotesResponseModel> { const url = 'https://api.tryto.cn/djt/text32'; return this.http.get<GetQuotesResponseModel>(url) .pipe( catchError(this.handleError) ); } /** * 错误信息捕获处理 * @param error 错误信息 */ private handleError(error: HttpErrorResponse) { if (error.error instanceof ErrorEvent) { // 客户端本身引起的错误信息 console.error(`客户端错误：${error.error.message}`); } else { // 服务端返回的错误信息 console.error(`服务端错误：HTTP 状态码：${error.status} \n\r 错误信息：${JSON.stringify(error.error)}`); } // 反馈给用户的错误信息（用于组件中使用 error 回调时的错误提示） return throwError('不好的事情发生了，毕竟我们都有不顺利的时候。。。'); } }

当请求发生错误时，通过在 HttpClient 方法返回的 Observable 对象中使用 pipe 管道将错误传递给自定义的错误处理器，从而完成捕获错误信息的后续操作