欢迎来到站圈网!

   as  code/json  pandas  ::v-deep  121

投稿中心

JavaScript

当前位置:主页 > Web前端 > JavaScript >

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

时间:2021-02-22|栏目:JavaScript|点击:

一般开发过程中不不会根据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返回给前端数据格式内容请搜索站圈网以前的文章或继续浏览下面的相关文章希望大家以后多多支持站圈网!

上一篇:NestJs使用Mongoose对MongoDB操作的方法

栏    目:JavaScript

下一篇:没有了

本文标题:nestjs返回给前端数据格式的封装实现

本文地址:http://www.zhano.cn/webFront/JavaScript/33308.html

您可能感兴趣的文章

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:12043006 | 邮箱:12043006#qq.com(#换成@)

Copyright © 2019-2020

Power by DedeCms 豫ICP备19001789号