在NestJs中,如何统一接口返回的数据结构🙃🙃🙃

在 NestJS 或任何其他现代后端框架中统一接口返回的数据结构是一个非常好的实践,原因包括:

  1. 一致性:统一的数据结构使得前端开发者知道每次请求都会收到相同格式的响应,无论是成功还是失败。这减少了处理不同响应格式的复杂性。前端应用可以建立统一的响应处理逻辑,比如统一处理错误或解析数据。

  2. 维护性:后端代码更加整洁,因为所有的响应都遵循同样的模板或结构。当你需要添加新的功能或信息时,统一的结构使得在不破坏现有客户端代码的情况下扩展变得更加容易。

统一接口返回的数据结构提升了接口的一致性、可维护性和用户体验,同时简化了前后端的开发和协作。虽然它可能需要在项目初期投入更多的设计和开发工作,但长期来看,这是一个值得的投资。

在 NestJS 中,你可以通过几种方式来统一接口返回的数据结构:

  • 拦截器(Interceptors:可以创建一个全局拦截器来统一修改和标准化出站响应。

在 Nestjs 中实现

在 NestJS 中,拦截器提供了一种强大的方法来拦截和修改方法的入参和出参,包括对响应数据的格式进行统一处理。

首先我们创建一个文件并且创建一个类并使用 @Injectable() 装饰器标记它们:

ts 复制代码
import {
  CallHandler,
  ExecutionContext,
  Injectable,
  NestInterceptor,
} from "@nestjs/common";
import { FastifyReply } from "fastify";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
import { getReasonPhrase } from "http-status-codes";
import { instanceToPlain } from "class-transformer";

function getCurrentTimestamp(): number {
  return Date.parse(new Date().toString()) / 1000;
}

@Injectable()
export class TransformInterceptor implements NestInterceptor {
  intercept(
    context: ExecutionContext,
    next: CallHandler<any>
  ): Observable<any> {
    // 获取Fastify的响应对象
    const response: FastifyReply = context
      .switchToHttp()
      .getResponse<FastifyReply>();

    return next.handle().pipe(
      map((originalData: any) => {
        if (
          originalData &&
          originalData.code &&
          originalData.message &&
          "data" in originalData
        ) {
          return originalData; // 如果是,直接返回
        }

        // 获取响应状态码
        const statusCode: number = response.statusCode;
        // 获取对应状态码的标准消息
        const message: string = getReasonPhrase(statusCode);

        // 构造标准响应格式
        return {
          code: statusCode,
          message: message,
          data: instanceToPlain(originalData) || null,
          timestamp: getCurrentTimestamp(),
        };
      })
    );
  }
}

在上面的这段代码中,使用 pipe()和 map()来转换从控制器返回的数据。在 map 操作符中,它检查返回的数据是否已经具有特定的格式(包含 code, message, 和 data)。如果是,就直接返回这个数据;如果不是,就构造一个新的对象包含状态码、消息、数据和时间。

如果原始数据不符合预期的格式,拦截器将构建一个标准格式的响应对象,包含以下属性:

  • code: 响应的 HTTP 状态码。
  • message: 基于状态码的标准消息。
  • data: 原始数据或 null,转换为简单的 JavaScript 对象(如果原始数据是类的实例)。
  • timestamp: 当前的 UNIX 时间戳。

创建拦截器后,你需要将其注册到你的应用中。拦截器可以全局注册(影响所有路由)或针对特定路由注册。通常是在跟路由下全局注册:

ts 复制代码
import { APP_INTERCEPTOR } from "@nestjs/core";
import { TransformInterceptor } from "./TransformInterceptor.ts";

@Module({
  // ...
  providers: [
    {
      provide: APP_INTERCEPTOR,
      useClass: TransformInterceptor,
    },
    // ...
  ],
})
export class AppModule {}

这个时候,我们可以访问一下接口,获取一下数据,首先我们在 service 中是这样返回的:

在接口中访问,返回了这样的内容:

现在这样的内容就是已经被我们格式化完成了,之后返回的数据都是类似的了。

总结

通过使用拦截器,你可以有效地控制和统一 NestJS 应用中的接口响应格式,提升前后端的协同效率和用户体验。

相关推荐
Csvn1 天前
OpenSpec 详细使用教程
前端
明月_清风1 天前
加密解密系统完全指南:原理剖析与 Go 实践
后端
之歆1 天前
Day19_LESS 完全指南——从入门到工程实践
前端·css·less
小江的记录本1 天前
【JVM虚拟机】垃圾回收GC:垃圾收集器:CMS:核心原理、回收流程、优缺点、废弃原因(附《思维导图》+《面试高频考点清单》)
java·jvm·后端·python·spring·面试·maven
云水一下1 天前
HTML5 从入门到精通:实战收官——从零搭建完整静态网站,综合运用所有知识
前端·html5
不总是1 天前
Windows 系统 Node.js 免安装版(zip)安装与配置教程(2026 最新)
前端·windows·node.js
冬奇Lab1 天前
每日一个开源项目(第105篇):Twenty - 跳出 Salesforce 的圈套,定义现代开源 CRM
前端·后端·开源
zhangyao9403301 天前
开发pc端时,表格的高度怎么设置才能铺满页面
前端·javascript·elementui
ServBay1 天前
月之暗面 Kimi Code 0.4.0 发布,终端 AI 编码助手全面采用 TypeScript,实现毫秒级启动
后端·aigc·ai编程
小江的记录本1 天前
【JVM虚拟机】垃圾回收GC:垃圾回收算法:标记-清除、标记-复制、标记-整理、分代收集(附《思维导图》+《面试高频考点清单》)
java·jvm·后端·python·算法·安全·面试