详解如何在详解如何在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' } )中体现,相比较我更喜欢前者的直接。
业务节点业务节点
以一个节点来表示某个业务,比如:
商品 https://demo.com/v1/product/
商品SKU https://demo.com/v1/product/sku/
动作动作
由HTTP动词来表示:
GET 请求一个商品 /product/${ID}
POST 新建一个商品 /product
PUT 修改一个商品 /product/${ID}
DELETE 删除一个商品 /product/${ID}
统一响应统一响应
这一点非常重要,特别是当我们新建一个商品时,商品的属性非常多,但如果我们缺少某个属性时。可以使用这样的一种统一
的响应格式:
{
"code": 100, // 0 表示成功
"errors": { // 错误明细
"title": "商品名称必填"
}
}
其中 code 不管成功与否都会有该属性。
状态码状态码
后端响应一个请求是包括状态码和响应内容,而每一种状态码又包含着不同的含义。
200 成功返回请求数据
401 无权限
404 无效资源
二、如何访问二、如何访问Http??
首先,需要导入 HttpClientModule 模块。
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule
] })