场景

我们在开发过程当中,总是会遇到因为数据原因,导致使用数组方法或者获取对象属性的时候报错。

xxx is not fuction

Cannot read property xxxx of undefined

因为这些错误,会导致直接页面打不开,所以我们一般会做一些容错处理,从而让页面可以正常打开。例如:&& 、三元运算符,甚至有时会看到 if 语句来处理。

常见方式

  1. // response 是来自接口的数据
  2. const response = {
  3. code: 200,
  4. msg: 'message',
  5. data: {
  6. total: 100,
  7. page: 1,
  8. pageSize: 10,
  9. content: []
  10. }
  11. }
  12.  
  13. const goodsList = response.data.content.forEach(() => {})
  14. const total = response.data.total

为了保证取data、content属性和使用forEach不报错,可能会这样做

  1. const goodsList = response.data && response.data.content && response.data.content.forEach(() => {})
  2. const total = response.data && response.data.total

这样就初步完成了数据容错,但是代码过于冗余可读性差,而且 total 的值还会可能变成 Boolean 类型。

简单改进

只需要简单的两个处理,一个是解构,一个是给默认值

  1. const { data = {} } = response
  2. const { constent = [], total = [] } = data
  3. goodsList.forEach(() => {})

解构是非常有必要的,增加代码可读性和扁平化数据

不过,但这里又有了新的问题。这个时候如果我得到数据如下的样子:

  1. const response = {
  2. data: null
  3. }

那么解构就会报错 Cannot destructure property content of 'undefined' or 'null'

默认值生效的条件是,对象的属性值严格等于undefined

上面代码中,属性data等于null,因为null与undefined不严格相等,所以是个有效的赋值,导致默认值 {} 不会生效。实际就成了如下的样子:

  1. const { constent = [], total = [] } = null

因此我们得保证拿到的数据不能存在null,不然上面的代码就没意义了。

进一步改进

你可能在想和后端约定好不返回 null 就好了

但是不能过分相信外部数据,包括约定之后的

这种情况其实可以在封装axios 或者fetch的时候,在里面添加一个过滤的函数,把从接口拿到的数据过滤一下,过滤掉值为 null 的数据,或者是把为 null 的数据重新赋值为 undefined。

下面是过滤数据的函数

  1. // 把获取到的数据过滤一遍
  2. const replaceNull = (obj) => {
  3. for (let key in obj) {
  4. switch (Object.prototype.toString.call(obj[key]).slice(8, -1)) {
  5. case 'Object':
  6. replaceNull(obj[key])
  7. break;
  8. case 'Array':
  9. for (let i = 0; i < obj[key].length; i++){
  10. replaceNull(obj[key][i])
  11. }
  12. break;
  13. default:
  14. if (obj[key] === null) obj[key] = undefined;
  15. }
  16. }
  17. }

过滤之后,这个时候这种写法就没问题了

  1. const { data = {} } = response
  2. const { constent = [], total = [] } = data
  3. goodsList.forEach(() => {})

当然如果你们有node作为中间层,前端视图层是可以放心的使用解构默认值的,比如 graphQl 这种。

结束语

前端数据容错处理是必须的,不能期待外部数据的格式就是自己想要的。不知道大家平时都是怎么处理的。

后端返回null,前端怎么处理?数据容错——不用过分相信外部数据的更多相关文章

  1. 数据返回(数据共享,即从后端返回到前端调用,四种(requesst、ModelAndView、Model、Map))

    @Controller @RequestMapping("/view")//请求父路径 public class GoodsController { @RequestMapping ...

  2. java加载外部文件数据到代码中:外部数据文件放到jar包中,调用方法getResourceAsStream

    任务要将数据文件geo.txt加载进行.因为是别人写的总体项目,不能乱动位置.只能将geo.txt打包到jar中某目录.比如,放到.class文件下怎么加载:http://riddickbryant. ...

  3. 【翻译】Flink 异步I / O访问外部数据

    本文来自官网翻译: Asynchronous I/O for External Data Access 需要异步I / O操作 先决条件 异步I / O API 超时处理 结果顺序 活动时间 容错保证 ...

  4. 关于JavaDate数据返回到前端变数字的问题(并引申到前后端时间的传输)

    不知道为什么,前端显示的所有数据项都没有错,就只有时间那一项很奇怪,是一串数字,而且这个数字在数据库怎么都找不到…… 然后我在后端从service到controller都debug了一遍,发现数据都没 ...

  5. [前后端分离项目]thinkphp返回给前端数据为字符串

    写在前面:现在项目大多是采用前后端分离的模式进行开发,这种模式下的开发大大的提高了工作效率,而进行前后端数据交互传输的格式基本以json为主,毕业设计中兼顾前端开发和后端开发(后端小白一个),前端业务 ...

  6. 后端返回值以json的格式返回,前端以json格式接收

    以随便一个类为例子:这个例子是查询企业主营类别前5事项 一.以json数组的格式返回到前端中 (1)后端将结果绑定到param中,然后将结果以为json数组的格式返回到前端 /** * 查询企业主营类 ...

  7. express后端和fetch前端的json数据传递

    在使用express做后端,前端使用fetch API来请求后端时,一般都是用 JSON 数据进行通信的. 下面是一个简单的例子: 前端: if (up) { var passwordAgain = ...

  8. 微信小程序POST请求参数传递不到后台, 前台获取不到后端返回的数据, 以及 post 请求返回 404 但后台能收到数据

    1 微信小程序POST请求参数传递不到后台 需要在微信请求 wx.request 改变默认 header 配置为如下 wx.request({ url: 'test.php', //仅为示例,并非真实 ...

  9. django学习-16.返回给前端页面数据为json数据类型的3种方案

    目录结构 1.前言 2.JsonResponse类的源码简单分析 2.1.JsonResponse类的源码如下所示 2.2.JsonResponse类的构造函数里的每个入参的大概含义和作用 3.[方案 ...

随机推荐

  1. (转)python中用logging实现日志滚动和过期日志删除

    转自:https://blog.csdn.net/ashi198866/article/details/46725813 logging库提供了两个可以用于日志滚动的class(可以参考https:/ ...

  2. 使用dom4j类操作xml文档

    dom4j操作xml数据 1.Document对象相关 ①读取XML文件,获得document对象. SAXReader reader = new SAXReader(); Document docu ...

  3. javaWeb核心技术第九篇之JSP

    JSP:全名是Java Server Pages,它是建立在Servlet规范之上的动态网页开发技术.在JSP文件中,HTML代码与Java代码共同存在,其中,HTML代码用来实现网页中静态内容的显示 ...

  4. 利用Azure虚拟机安装Dynamics 365 Customer Engagement之一:准备工作

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  5. jeesite3环境部署时初始化数据库注意问题

    ---恢复内容开始--- 首先要修改jeesite.properties下数据库连接方式,注意选择自己的数据库 其次在pom.xml文件中修改对应的数据库连接方式 最后运行db文件夹下的init-db ...

  6. Zookeeper学习(一)

    shell角度 API角度 Zookeeper可单节点,可分布式 作用: distributed coordination(分布式协调) 同一时间只有一个对外提供服务,另外的就是standy. 当ac ...

  7. 微信小程序通过getPhoneNumber后台PHP解密获取用户手机号码

    之前做的版本用户这块是以获取用户openid为凭证,最近改版重新整理了一下,新增注册登录以手机号码为主, 两种(正常注册手机号码-密码+一键获取当前用户手机号码) getPhoneNumber这个组件 ...

  8. 打包Python文件为exe

    pip install pyinstaller 然后就在终端里执行命令 cd 到目标文件的目录下 执行 pyinstaller  -F  ***.py 即可生成exe

  9. Educational Codeforces Round 74 (Rated for Div. 2)

    传送门 A. Prime Subtraction 判断一下是否相差为\(1\)即可. B. Kill 'Em All 随便搞搞. C. Standard Free2play 题意: 现在有一个高度为\ ...

  10. spring mvc 源码简要分析

    关于web项目,运用比较多的是过滤器和拦截器 过滤器基于责任链设计模式 创建过滤器链 / Create the filter chain for this requestApplicationFilt ...