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


Posted in Javascript onFebruary 22, 2021

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

Javascript 相关文章推荐
JavaScript格式化数字的函数代码
Nov 30 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
DOM 高级编程
May 06 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
JS验证码实现代码
Sep 14 Javascript
详解vue 命名视图
Aug 14 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 #Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 #Javascript
k8s node节点重新加入master集群的实现
Feb 22 #Javascript
js实现简单图片拖拽效果
Feb 22 #Javascript
用vite搭建vue3应用的实现方法
Feb 22 #Vue.js
详解Vite的新体验
Feb 22 #Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 #Vue.js
You might like
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
js数组常用最重要的方法
2018/02/04 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
matplotlib作图添加表格实例代码
2018/01/23 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
python修改字典键(key)的方法
2019/08/05 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
小学美术教学反思
2014/02/01 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
2014年话务员工作总结
2014/11/19 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL
windows server2008 开启端口的实现方法
2022/06/25 Servers