详解如何在Angular优雅编写HTTP请求

引言

基本上当下的应用都会分为前端与后端，当然这种前端定义不在限于桌面浏览器、手机、APP等设备。一个良好的后端会通过一套所有前端都通用的 RESTful API 序列接口作为前后端之间的通信。

这其中对于身份认证都不可能再依赖传统的Session或Cookie；转而使用诸如OAuth2、JWT等这种更适合API接口的认证方式。当然本文并不讨论如何去构建它们。

一、API 设计

首先虽然并不会讨论身份认证的技术，但不管是OAuth2还是JWT本质上身份认证都全靠一个 Token 来维持；因此，下面统一以 token 来表示身份认证所需要的值。

一套合理的API规则，会让前端编码更优雅。因此，希望在编写Angular之前，能与后端相互达成一种“协议”也很有必要。可以尝试从以下几点进行考虑。

版本号

可以在URL（例：https://demo.com/v1/）或Header（例：headers: { version: 'v1' } ）中体现，相比较我更喜欢前者的直接。

业务节点

以一个节点来表示某个业务，比如：

动作

由HTTP动词来表示：

统一响应

这一点非常重要，特别是当我们新建一个商品时，商品的属性非常多，但如果我们缺少某个属性时。可以使用这样的一种统一的响应格式：

{  "code": 100, // 0 表示成功  "errors": { // 错误明细    "title": "商品名称必填"  }}

其中 code 不管成功与否都会有该属性。

状态码

后端响应一个请求是包括状态码和响应内容，而每一种状态码又包含着不同的含义。

二、如何访问Http？

首先，需要导入 HttpClientModule 模块。

import { HttpClientModule } from '@angular/common/http';@NgModule({  imports: [    HttpClientModule  ]})

然后，在组件类注入 HttpClient。

export class IndexComponent {  constructor(private http: HttpClient) { }}

最后，请求点击某个按钮发送一次GET请求。

user: Observable<User>;getUser() {  this.user = this.http.get<User>('/assets/data/user.json');}

打印结果：

{{ user | async | json }}

三个简单的步骤，就是一个完整的HTTP请求步骤。

然后，现实与实际是有一些距离，比如说身份认证、错误处理、状态码处理等问题，在上面并无任何体现。

可，上面已经足够优雅，要让我破坏这种优雅那么此文就变得无意义了！