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 相关文章推荐
jqPlot 基于jquery的画图插件
Apr 26 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
原生js实现购物车功能
Sep 23 Javascript
element多个表单校验的实现
May 27 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
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
php实现小程序支付完整版
2018/10/09 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
js 幻灯片的实现
2011/12/06 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
numpy中的高维数组转置实例
2018/04/17 Python
用python处理MS Word的实例讲解
2018/05/08 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
现场活动策划方案
2014/08/22 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
在职证明格式样本
2015/06/15 职场文书
八年级历史教学反思
2016/02/19 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL