你不想背的锅的，让class-validator来帮你

你不想背的锅的，让class-validator来帮你

背景

随着web开发的不断发展，前后端分离早已从一个趋势变成了项目开发的日常配置，分离之后分工更加明确，开发效率提升，但是同时，接口也成为了前后端沟通的唯一渠道，前端页面对接口数据准确性的依赖程度空前提高。通常前后端商讨定义好api格式，正常运行起来也并没有什么问题，但事情往往并不会这么理想。。。

出现的问题

复现一个前端生涯中经常出现的场景：

• 产品（气喘吁吁）：快！用户反馈页面白页了，你们前端快看一下！
• 前端：不能吧～ 最近没上过线啊
• 前端（一顿debug之后）：接口有个字段没传，你去找RD问一下吧
• 前端心里：不是我的锅，干嘛每次都来吓我

常见原因分析

1. 某字段没传：js可以尝试读取一个对象中不存在的属性，但如果连这个对象都不存在，js就会报错，并阻止后续代码的执行。

    /*
    api预定格式：
    {
        code:0,
        data:{
            house:{
                name: 'XX公寓',
                tags: ['月租', ‘独卫’]
            }
        }
    }
    实际返回：
    {
        code:0,
        data:{}
    }
    */
    const response = await http.post(url);
    // 返回的house字段不存在，下面这行会报错，后面的代码都不会执行
    localName = response.data.house.name;

2. 字段数据类型错误：

    /*
    api预定格式：
    {
        code:0,
        data:{
            house:{
                name: 'XX公寓',
                tag: ['月租', ‘独卫’]
            }
        }
    }
    实际返回：
    {
        code:0,
        data:{
            house:{
                name: 'XX公寓',
                tag: {}
            }
        }
    }
    */
    const response = await http.post(url);
    // 返回的格式不是数组，对象没有pop方法,报错并停止执行
    lastTag = response.data.house.tags.pop();

3. 数据超过范围：比如字符串长度超过接口定义，导致页面元素位置错乱。

定位根本原因

接口双方应该本着互不信任的原则，在执行逻辑之前要对数据做校验。为了防止攻击者伪造请求进行攻击，后端往往要做大量的数据校验。
但是前端请求的是自己的服务器，安全性很有保障，所以大多数情况下前端不会对后端返回的数据做校验，这通常不会有什么问题，当然，是在产品气喘吁吁跑来找你之前。

尝试解决方案

1. 手动校验每个字段，类似这样：

    /*
    api预定格式：
    {
        code:0,
        data:{
            house:{
                name: 'XX公寓',
                tag: ['月租', '独卫']
            }
        }
    }
    */
    const response = await http.post(url);
    if (response.code!=0){
   console.log('code 错误')}
    if (!response.data){
   console.log('data 缺失'