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 相关文章推荐
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 Javascript
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
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
php实现三级级联下拉框
2016/04/17 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
javascript中对对层的控制
2006/12/29 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python实现博客文章爬虫示例
2014/02/26 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
python的常用模块之collections模块详解
2018/12/06 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
Python @property装饰器原理解析
2020/01/22 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
学习自我鉴定
2014/02/01 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
导游词怎么写
2015/02/04 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python