剥茧抽丝 | 解读前后端协议制定中的原子与接口封装之争

2023-09-16 14:41:24

优化前后端交互：避免原子操作导致的高耦合与低性能

在现代软件开发中，前后端分离架构已成为主流，它通过将业务逻辑与表现层分离，提升了系统的可维护性、可扩展性和可测试性。然而，在实施前后端分离时，一个常见的痛点是后端服务会将非常原子的操作抽离出来，而业务层仅负责传递服务，导致前端高度耦合于业务拼装和多请求中。这不仅会增加前端的开发难度，还会降低系统的整体性能。

问题根源

这种现象产生的根源在于，后端服务往往将业务逻辑细化为非常小的操作单元，而前端需要通过多次调用这些原子操作来完成一个完整的业务流程。这种设计方式使得前端需要负责大量的业务拼装，增加了前端的开发负担。同时，多次调用后端服务会带来额外的网络开销，降低系统的吞吐量和响应时间。

解决方案

为了解决上述问题，我们可以采取以下几种解决方案：

1. 使用更粗粒度的接口

通过将多个原子操作组合成更粗粒度的接口，前端可以一次调用完成多个操作，从而减少请求数量和前端的开发难度。例如，我们可以将“获取用户个人信息”和“获取用户订单历史”这两个原子操作组合成一个“获取用户详情”的接口。

2. 使用数据传输对象（DTO）

DTO是一种数据结构，专门用于在前后端之间传递数据。通过使用DTO，我们可以将后端返回的数据结构化，减少前端对后端数据格式的依赖，提升前端开发效率。例如，我们可以定义一个“用户信息DTO”来封装用户个人信息和订单历史数据。

3. 使用缓存

缓存是一种临时的存储机制，它可以将频繁访问的数据存储在内存中，以避免每次请求都访问数据库。通过使用缓存，我们可以减少对后端服务的调用次数，从而提高系统的性能。例如，我们可以将用户详情信息缓存起来，以便下次前端需要获取时直接从缓存中读取。

4. 使用消息队列

消息队列是一种异步处理机制，它可以将任务放入队列中，由专门的消费者进程异步处理。通过使用消息队列，我们可以将耗时较长的任务从前端处理中解耦，从而提高前端的响应速度。例如，我们可以将订单创建任务放入消息队列中，由后台进程异步处理。

最佳实践

在制定前后端协议时，遵循以下最佳实践可以进一步提升系统的稳定性和性能：

1. 使用RESTful API

RESTful API是一种无状态、基于资源的API设计风格，它非常适合前后端分离架构。RESTful API具有资源 محور、统一接口、无状态等特点，可以简化前后端交互，提高系统的可维护性。

2. 使用JSON数据格式

JSON是一种轻量级的数据交换格式，它具有简单、易于解析、可读性强等特点，非常适合前后端交互。JSON可以方便地在前端和后端之间传递复杂的数据结构。

3. 使用HTTPS

HTTPS是一种安全的网络协议，它可以加密前后端之间的通信数据，保证数据的安全性。在传输敏感数据时，例如用户密码或财务信息，使用HTTPS至关重要。

4. 使用版本控制

前后端协议在演进过程中可能会发生变化，因此需要使用版本控制来管理协议的变更。通过版本控制，我们可以确保前端和后端能够兼容不同的协议版本，避免因协议不兼容导致的系统故障。

案例分析

在我们的一个实际项目中，我们遇到了如下问题：后端服务将业务逻辑细化为非常原子的操作，导致前端需要进行大量业务拼装和多请求调用。为了解决这个问题，我们采用了以下解决方案：

1. 将原子操作组合成粗粒度接口

我们将“获取用户个人信息”和“获取用户订单历史”这两个原子操作组合成了一个“获取用户详情”的接口。通过这个接口，前端可以一次调用完成两个操作，减少了请求数量和前端的开发难度。

2. 使用数据传输对象（DTO）

我们定义了一个“用户信息DTO”来封装用户个人信息和订单历史数据。通过使用DTO，前端可以一次性获取所有所需数据，无需再进行数据拼装。

3. 使用缓存

我们将用户详情信息缓存起来，以便前端下次需要获取时直接从缓存中读取。通过使用缓存，我们减少了对后端服务的调用次数，提高了系统的性能。

代码示例

以下是一个使用RESTful API和JSON数据格式设计前后端协议的代码示例：

// 后端代码
@RestController
@RequestMapping("/api/users")
public class UserController {

    @GetMapping("/{id}")
    public User getUserById(@PathVariable Long id) {
        return userService.getUserById(id);
    }

    @PostMapping
    public User createUser(@RequestBody User user) {
        return userService.createUser(user);
    }

}

// 前端代码
const API_URL = "http://localhost:8080/api/users";

async function getUserById(id) {
    const response = await fetch(`${API_URL}/${id}`);
    const data = await response.json();
    return data;
}

async function createUser(user) {
    const response = await fetch(API_URL, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(user),
    });
    const data = await response.json();
    return data;
}