nestjs返回给前端数据格式的封装

一般开发过程中不不会根据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": "请求成功"
  }