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 
```

也可以直接建目录，然后把.ts文件复制过去

```

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;
    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": "请求成功"
}

</article>