引言

基本上當下的應用都會分為前端與后端，當然這種前端定義不在限于桌面瀏覽器、手機、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請求步驟。

然后，現實與實際是有一些距離，比如說身份認證、錯誤處理、狀態碼處理等問題，在上面并無任何體現。

可，上面已經足夠優雅，要讓我破壞這種優雅那么此文就變得無意義了！