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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
推荐一篇入门级的Class文章
2007/03/19 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
javascript 函数使用说明
2010/04/07 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
js微信支付实现代码
2016/12/22 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python unichr函数知识点总结
2020/12/16 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
Myholidays美国:在线旅游网站
2019/08/16 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
人事助理自荐信
2014/02/02 职场文书
党课培训心得体会
2014/09/02 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
化验室安全管理制度
2015/08/06 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python