如何将NestJS返回给前端的数据格式封装成一种长尾词？

本文共计743个文字，预计阅读时间需要3分钟。

在开发过程中，通常不会直接根据HTTP状态码来判断接口请求的成功与失败，而是会根据请求返回的数据来判断。具体来说，会加上code字段、返回的数据格式对比以及直接返回的数据格式：

1. 加上code字段：json{code: 200, data: {id: 1, uuid: cbbe7abc-b2a7-11e7-8b91-0242ac130004}}

2. 返回的数据格式对比：- 直接返回的数据格式：json{id: 1, uuid: cbbe7abc-b2a7-11e7-8b91-0242ac130004}

- 对比格式：json{id: 1, uuid: cbbe7abc-b2a7-11e7-8b91-0242ac130004}

一般开发过程中不不会根据httpcode来判断接口请求成功与失败的,而是会根据请求返回的数据,里面加上code字段

一、返回的数据格式对比

1、直接返回的数据格式

{ "id": 1, "uuid": "cbbe7abc-b95e-48a0-8d24-b1ac93c45328", "name": "哈士奇1", "age": 12, "color": null, "createAt": "2019-07-25T09:13:30.000Z", "updateAt": "2019-07-25T09:13:30.000Z" }

2、我们自己包装后的返回数据

{ code: 0, message: "请求成功", data: { "id": 1, "uuid": "cbbe7abc-b95e-48a0-8d24-b1ac93c45328", "name": "哈士奇1", "age": 12, "color": null, "createAt": "2019-07-25T09:13:30.000Z", "updateAt": "2019-07-25T09:13:30.000Z" } }

二、拦截全部的错误请求,统一返回格式

1、使用命令创建一个过滤器

nest g f filters/httpException

2、过滤器的代码

import { ArgumentsHost, Catch, ExceptionFilter, HttpException, HttpStatus, Logger, } from '@nestjs/common'; @Catch(HttpException) export class HttpExceptionFilter implements ExceptionFilter { catch(exception: HttpException, host: ArgumentsHost) { const ctx = host.switchToHttp(); const response = ctx.getResponse(); const request = ctx.getRequest(); const message = exception.message.message; Logger.log('错误提示', message); const errorResponse = { data: { error: message, }, // 获取全部的错误信息 message: '请求失败', code: 1, // 自定义code url: request.originalUrl, // 错误的url地址 }; const status = exception instanceof HttpException ? exception.getStatus() : HttpStatus.INTERNAL_SERVER_ERROR; // 设置返回的状态码、请求头、发送错误信息 response.status(status); response.header('Content-Type', 'application/json; charset=utf-8'); response.send(errorResponse); } }

3、在main.ts中全局注册

... import { HttpExceptionFilter } from './filters/http-exception.filter'; async function bootstrap() { ... // 全局注册错误的过滤器 app.useGlobalFilters(new HttpExceptionFilter()); } bootstrap();

4、测试,返回的错误信息

{ "statusCode": 400, "error": "Bad Request", "data": { "message": [ { "age": "必须的整数" } ] }, "message": '请求失败', "code": 1, "url": "/api/v1/cat" }

三、统一请求成功的返回数据

1、创建一个拦截器src/interceptor/transform.interceptor.ts

2、拦截器的代码

import { Injectable, NestInterceptor, CallHandler, ExecutionContext, } from '@nestjs/common'; import { map } from 'rxjs/operators'; import { Observable } from 'rxjs'; interface Response<T> { data: T; } @Injectable() export class TransformInterceptor<T> implements NestInterceptor<T, Response<T>> { intercept( context: ExecutionContext, next: CallHandler<T>, ): Observable<Response<T>> { return next.handle().pipe( map(data => { return { data, code: 0, message: '请求成功', }; }), ); } }

3、全局注册

... import { TransformInterceptor } from './interceptor/transform.interceptor'; async function bootstrap() { ... // 全局注册拦截器 app.useGlobalInterceptors(new TransformInterceptor()); ... } bootstrap();

4、测试返回数据

{ "data": { "id": 1, "uuid": "cbbe7abc-b95e-48a0-8d24-b1ac93c45328", "name": "哈士奇1", "age": 12, "color": null, "createAt": "2019-07-25T09:13:30.000Z", "updateAt": "2019-07-25T09:13:30.000Z" }, "code": 0, "message": "请求成功" }

到此这篇关于nestjs返回给前端数据格式的封装实现的文章就介绍到这了,更多相关nestjs返回给前端数据格式内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！