使用Angular HttpClient与后端通信

1、技术概述

HttpClient是Angular框架中用来创建和发送Get、Post等Http请求的实用模块。因为我们的团队项目是前后端分离的架构，由Angular编写的前端（客户端）要与Java编写的后端（服务器）通信，所以需要学习该技术。其难点我认为主要在于请求体的写法。

2、技术详述

• （1）引入：

  在需要使用到HttpClient的组件（通常是某个服务）的构造方法中，通过依赖注入的方式引入：

    constructor(private http: HttpClient) {
    }
  

  一般只需要像上面那样写，安装了Angular插件的开发工具（我使用的是IDEA）就会自动添加导入语句：

  import {HttpClient} from '@angular/common/http';
  

• （2）发送Http请求：

  这里以我们项目中一个发送通知的方法为例，所用到的Http请求为Post。

    sendNotification(notification: NotificationModel) {
      return this.http.post(`${ApiUrlResource.PUB_GROUPS}/${notification.gid}/notifications`, { 
        title: notification.title,
        content: notification.content
      });
    }
  

  NotificationModel是一个封装了title、content、groupId字段的对象。

  在相关组件中调用上面的方法并订阅返回的信息：

  this.service.sendNotification(this.model).subscribe(
      () => {
        this.msg.success('发布成功。')
        this.newNotificationForm.reset();
      }, (error: HttpErrorResponse) => {
        this.msg.error(error.error.message);
      }
    );
  

  由于该接口在请求成功时返回的请求体为空，所以next回调的参数也为空。

  subscribe方法会根据不同的返回结果执行相应回调，以向用户发出提示。

  再来一个Get请求的例子：

  getGroupInfo(id: number) {
      return this.http.get<GroupInfoModel>(`${this.url}/${id}`);
  }
  

  这里get方法指定返回类型为GroupInfoModel，相当于隐式地将父方法的返回值声明为.

  getGroupInfo(id: number): Observable<GroupInfoModel> {
  ...
  }
  

  同样在相关组件中调用上面的方法并订阅返回的信息：

  getGroupInfo(id: number) {
      this.pubService.getGroupInfo(id).subscribe(
        data => {
          this.group = data;
        }, (error: HttpErrorResponse) => {
          this.msg.error(error.error.message);
        }
      )
  }
  

  这里next回调参数不用显式声明成(data: GroupInfoModel)，因为上面的get方法已经显式声明了返回值类型，编译器可以自动解析字段。

  我们的项目中还用到了Delete和Patch请求，由于用法与Post方法类似，在此就不再赘述。

3、技术使用中遇到的问题和解决过程

在使用HttpClient发送请求时，方法参数中的url字段写法比较特别，需要引起注意：

在服务中定义url字段为：

private url = 'http://localhost:8080/not/pub/groups';

以get方法为例，容易按照通常函数传参的写法错误地写为：

this.http.get(url);

而正确的写法为：

this.http.get(`${url}`);

`是键盘英文模式下tab键上方那个有点像顿号的符号

4、总结

网络请求模块对前端框架来说是很基本的模块，Angular内置的HttpClient就很方便用户调用，而其他主流前端框架如Vue，React用的是第三方网络请求模块库Axios。学习并掌握这些网络请求模块，有助于更好地理解前后端分离的架构，提高复杂项目的开发能力。

5、参考文献、参考博客

Angular官方文档