RESTful API 簡介

RESTful API 是一種基於 HTTP 協議的 Web 服務接口設計。它遵循 REST（Representational State Transfer）原則，提供了一組指南以確保 API 的一致性和可維護性。

設計準則

統一資源定位：使用 URI 來唯一標識資源。
無狀態操作：每個請求應包含所有必要信息。
可緩存的響應：標明哪些響應是可以被緩存的。
統一接口：標準化操作如使用 HTTP 方法。
分層系統：客戶端無需知道後端服務的具體實現。

URI 設計與資源表達

良好的 URI 設計應該清晰且直觀，易於理解和使用。

範例

獲取用戶列表：GET /users
獲取特定用戶：GET /users/{id}
新增用戶：POST /users
更新用戶：PUT /users/{id}
刪除用戶：DELETE /users/{id}

HTTP 方法和狀態碼使用

HTTP 方法和狀態碼是 RESTful API 溝通的基礎。

方法

GET: 獲取資源。
POST: 創建新資源。
PUT: 更新現有資源。
DELETE: 刪除資源。

狀態碼

200 OK: 請求成功。
201 Created: 資源創建成功。
400 Bad Request: 請求格式錯誤。
404 Not Found: 資源不存在。
500 Internal Server Error: 服務器錯誤。

HTTP 通訊封包 row data 格式

當您使用瀏覽器的開發者工具 (F12) 查看 HTTP 通訊時，會見到以下格式的原始數據：

Request 封包格式

GET 請求示例:

GET /users HTTP/1.1
Host: example.com
Connection: keep-alive
Accept: application/json

POST 請求示例:

POST /users HTTP/1.1
Host: example.com
Content-Type: application/json
Content-Length: 27

{
"name": "newUser"
}

Response 封包格式

200 OK 響應示例:

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 49

[
{
    "id": 1,
    "name": "Alice"
}
]

201 Created 響應示例:

HTTP/1.1 201 Created
Content-Type: application/json
Content-Length: 36

{
"id": 2,
"name": "newUser"
}

這些原始格式的數據展示了 HTTP 請求和響應的頭部信息以及主體內容。在開發和調試過程中，這些信息非常重要，尤其是在處理錯誤或不預期的響應時。

建立簡單 RESTful API 實作

要建立一個簡單的 RESTful API 使用 Node.js 與 Express，首先需要設置你的 Node.js 環境。以下是從建立新專案到執行你的第一個 Express 伺服器的步驟。

建立新的 Express 專案

初始化 Node.js 專案:

在命令列中，選擇一個文件夾來存放你的專案，然後執行以下命令以創建一個新的 Node.js 專案。

npm init -y

這將創建一個 package.json 文件。

安裝 Express:

繼續在命令列中執行以下命令以安裝 Express。

npm install express

創建你的 Express 伺服器:

在專案的根目錄下創建一個名為 index.js 的文件（或其他你喜歡的名字），並添加以下代碼：

const express = require('express');
const app = express();
app.use(express.json());

let users = [{ id: 1, name: 'Alice' }];

app.get('/users', (req, res) => {
    res.status(200).json(users);
});

app.post('/users', (req, res) => {
    users.push(req.body);
    res.status(201).send();
});

app.listen(3000, () => console.log('Server running on port 3000'));

運行伺服器:

在命令列中執行以下命令以啟動你的 Express 伺服器：

node index.js

這將在端口 3000 上啟動伺服器。你現在可以通過瀏覽器或 API 測試工具（如 Postman）訪問 http://localhost:3000/users。

Angular HttpClient 使用

Angular 的 HttpClient 模組提供了一種簡單的方法來進行 HTTP 請求。

範例

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

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {}

  getUsers() {
    return this.http.get('/api/users');
  }
}

RxJS 與 RESTful API 整合

使用 RxJS 可以更好地處理異步請求和響應。

範例

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {}

  getUsers(): Observable<any> {
    return this.http.get('/api/users');
  }
}

Angular 中狀態管理與錯誤處理

使用 Angular Service 和 RxJS，可以有效地進行狀態管理和錯誤處理。

範例：錯誤處理

this.userService.getUsers().pipe(
  catchError(this.handleError)
).subscribe(data => {
  // 處理數據
}, err => {
  // 處

理錯誤
});

開發完整 Angular 應用案例

開發一個完整的 Angular 應用涉及到多個部分的協同工作，包括前端界面、與後端的通信、狀態管理等。

步驟

設計界面：使用 Angular 的組件和模板。
服務與依賴注入：創建用於與後端通信的服務。
路由與導航：設計應用的導航結構。
狀態管理：使用服務和 RxJS 來管理應用狀態。
錯誤處理：處理來自後端的錯誤響應。