您对Angular中的REST了解那些？

封面图 • 2025-11-21 • Angular

在 Angular 中，**REST（Representational State Transfer）** 是一种常用的 Web 服务架构风格，用于客户端和服务器之间的通信。Angular 提供了多种方式来与 RESTful API 进行交互，最常用的是使用 **`HttpClient`** 模块。

以下是我对 Angular 中 REST 的理解：

---

## 🧩 1. REST 简介

REST 是基于 HTTP 协议的架构风格，其核心思想是通过统一的接口（如 GET、POST、PUT、DELETE）来操作资源（Resource）。每个资源都有一个唯一的 URI（URL）标识。

例如：
- `GET /api/users`：获取所有用户
- `POST /api/users`：创建一个新用户
- `GET /api/users/1`：获取 ID 为 1 的用户
- `PUT /api/users/1`：更新 ID 为 1 的用户
- `DELETE /api/users/1`：删除 ID 为 1 的用户

---

## 📦 2. Angular 中的 REST 实现

Angular 使用 `@angular/common/http` 模块中的 `HttpClient` 来发送 HTTP 请求。这个模块提供了更现代、更强大的 API，比旧版的 `HttpModule` 更推荐使用。

### ✅ 主要步骤如下：

#### 1. 导入 `HttpClientModule`

```ts
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  // ...
})
export class AppModule { }
```

#### 2. 注入 `HttpClient`

在组件或服务中注入 `HttpClient`：

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

constructor(private http: HttpClient) {}
```

#### 3. 发送 HTTP 请求

##### GET 请求（获取数据）

```ts
this.http.get('https://api.example.com/data').subscribe(data => {
  console.log(data);
});
```

##### POST 请求（提交数据）

```ts
const user = { name: 'John', age: 30 };
this.http.post('https://api.example.com/users', user).subscribe(response => {
  console.log(response);
});
```

##### PUT 请求（更新数据）

```ts
const updatedUser = { id: 1, name: 'Jane' };
this.http.put('https://api.example.com/users/1', updatedUser).subscribe(response => {
  console.log(response);
});
```

##### DELETE 请求（删除数据）

```ts
this.http.delete('https://api.example.com/users/1').subscribe(response => {
  console.log(response);
});
```

---

## 🔄 3. 处理响应和错误

`HttpClient` 返回的是 **Observable**，可以使用 RxJS 的方法进行处理。

```ts
this.http.get('https://api.example.com/data')
  .pipe(
    catchError(this.handleError)
  )
  .subscribe(data => {
    console.log('Success:', data);
  });
```

### 错误处理示例：

```ts
private handleError(error: HttpErrorResponse) {
  if (error.error instanceof ErrorEvent) {
    console.error('Client-side error:', error.error.message);
  } else {
    console.error(`Server returned code ${error.status}, body was: ${error.error}`);
  }
  return throwError('Something went wrong.');
}
```

---

## 🧠 4. 使用 Service 封装 HTTP 请求

为了代码整洁和可维护性，通常将 HTTP 请求封装到一个服务中。

```ts
@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'https://api.example.com/users';

constructor(private http: HttpClient) {}

getUsers() {
    return this.http.get(this.apiUrl);
  }

getUser(id: number) {
    return this.http.get(`${this.apiUrl}/${id}`);
  }

createUser(user: any) {
    return this.http.post(this.apiUrl, user);
  }

updateUser(id: number, user: any) {
    return this.http.put(`${this apiUrl}/${id}`, user);
  }

deleteUser(id: number) {
    return this.http.delete(`${this.apiUrl}/${id}`);
  }
}
```

然后在组件中使用：

```ts
constructor(private userService: UserService) {}

ngOnInit() {
  this.userService.getUsers().subscribe(users => {
    console.log(users);
  });
}
```

---

## 🧪 5. 测试 REST 接口

你可以使用工具如 **Postman** 或 **curl** 来测试 REST API，也可以在 Angular 应用中使用 **Mock Backend**（如 `angular-in-memory-web-api`）进行开发阶段的模拟请求。

---

## ✅ 总结

| 功能 | Angular 实现 |
|------|--------------|
| 获取数据 | `GET` + `HttpClient.get()` |
| 提交数据 | `POST` + `HttpClient.post()` |
| 更新数据 | `PUT` + `HttpClient.put()` |
| 删除数据 | `DELETE` + `HttpClient.delete()` |
| 错误处理 | `catchError` + RxJS |
| 服务封装 | 使用 `@Injectable()` 创建服务 |

---

如果你有具体的场景（比如如何处理 token、跨域问题、拦截器等），我也可以进一步讲解！需要吗？