gpt4 book ai didi

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

转载 作者:qq735679552 更新时间:2022-09-28 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章nestjs返回给前端数据格式的封装实现由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

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

1、返回的数据格式对比

1、直接返回的数据格式 。

?
1
2
3
4
5
6
7
8
9
{
   "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、我们自己包装后的返回数据 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
{
  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"
  }
}

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

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

?
1
nest g f filters/httpException

2、过滤器的代码 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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中全局注册 。

?
1
2
3
4
5
6
7
8
9
...
import { HttpExceptionFilter } from './filters/http-exception.filter' ;
 
async function bootstrap() {
  ...
  // 全局注册错误的过滤器
  app.useGlobalFilters( new HttpExceptionFilter());
}
bootstrap();

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "statusCode" : 400,
  "error" : "Bad Request" ,
  "data" : {
   "message" : [
    {
     "age" : "必须的整数"
    }
   ]
  },
  "message" : '请求失败' ,
  "code" : 1,
  "url" : "/api/v1/cat"
}

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

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

2、拦截器的代码 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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、全局注册 。

?
1
2
3
4
5
6
7
8
9
10
...
import { TransformInterceptor } from './interceptor/transform.interceptor' ;
 
async function bootstrap() {
  ...
  // 全局注册拦截器
  app.useGlobalInterceptors( new TransformInterceptor());
  ...
}
bootstrap();

4、测试返回数据 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "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返回给前端数据格式内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我! 。

原文链接:https://blog.csdn.net/kuangshp128/article/details/97240664 。

最后此篇关于nestjs返回给前端数据格式的封装实现的文章就讲到这里了,如果你想了解更多关于nestjs返回给前端数据格式的封装实现的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com