场景

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

xxx is not fuction

Cannot read property xxxx of undefined

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

常见方式

 // response 是来自接口的数据
const response = {
code: 200,
msg: 'message',
data: {
total: 100,
page: 1,
pageSize: 10,
content: []
}
} const goodsList = response.data.content.forEach(() => {})
const total = response.data.total

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

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

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

简单改进

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

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

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

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

 const response = {
data: null
}

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

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

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

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

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

进一步改进

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

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

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

下面是过滤数据的函数

 // 把获取到的数据过滤一遍
const replaceNull = (obj) => {
for (let key in obj) {
switch (Object.prototype.toString.call(obj[key]).slice(8, -1)) {
case 'Object':
replaceNull(obj[key])
break;
case 'Array':
for (let i = 0; i < obj[key].length; i++){
replaceNull(obj[key][i])
}
break;
default:
if (obj[key] === null) obj[key] = undefined;
}
}
}

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

 const { data = {} } = response
const { constent = [], total = [] } = data
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. go源码解析-Println的故事

    本文主要通过平常常用的go的一个函数,深入源码,了解其底层到底是如何实现的. Println Println函数接受参数a,其类型为-interface{}.用过Java的对这个应该比较熟悉,Java ...

  2. 测试:Oracle 19c RAC添加私网

    最近有个客户需求是在某12.2版本的RAC环境上添加心跳网络,顺便考虑将之前的心跳网络改为asm专用.我目前只有19c的RAC的测试环境(19c是12c的最终稳定版本),直接测试验证下过程备忘. 1. ...

  3. Android8.1 源码修改之通过黑名单屏蔽系统短信功能和来电功能

    前言 之前写过一篇Android6.0 的屏蔽系统短信功能和来电功能,具体看这里 同样的最近有个新需求,需要将8.1 设备的来电功能和短信功能都屏蔽掉,特殊产品就是特殊定制,那就开始吧. 屏蔽短信功能 ...

  4. Android 媒体格式

    音频格式和编解码器 格式/编解码器 编码器 解码器 细节 支持的文件类型/容器格式 AAC LC • • 支持单声道/立体声/ 5.0 / 5.1内容,标准采样率为8至48 kHz. •3GPP(.3 ...

  5. Python语法速查: 3. 字符串格式化

    返回目录 (1)简易字符串格式化 字符串属于不可变序列,只能生成新的,不能改变旧的.“字符串格式化”有点像以前C语言的sprintf,可以将若干变量代入格式化的字符串,生成一个符合要求的新字符串. 转 ...

  6. [日常] win10开启和安装ubuntu子系统

    在控制面板的程序与功能里启用和关闭windows功能打开,适用于linux的windows子系统 在微软商店里搜索ubuntu,直接点击安装就可以了 安装完成后的windows与linux的磁盘映射见 ...

  7. springboot入门以及配置文件

    springboot入门以及配置文件 SpringBoot是什么? Spring Boot它本身并不提供Spring框架的核心特性以及扩展功能,只是用于快速.敏捷地开发新一代基于Spring框架的应用 ...

  8. 《2018:skymind.ai 发布了一份非常全面的开源数据集》

    这是一份非常全面的开源数据集,你,真的不想要吗?   近期,skymind.ai 发布了一份非常全面的开源数据集.内容包括生物识别.自然图像以及深度学习图像等数据集,现机器之心将其整理如下:(内附链接 ...

  9. <DFS & BFS> 286 339 (BFS)364

    286. Walls and Gates DFS: 思路是,搜索0的位置,每找到一个0,以其周围四个相邻点为起点,开始 DFS 遍历,并带入深度值1,如果遇到的值大于当前深度值,将位置值赋为当前深度值 ...

  10. shell基础概念, if+命令, shell中引用python, shell脚本的几种执行方式

    说明: 虚拟机中shell_test目录用来练习shell, 其中有个test.log文件用来存放日志 #!/usr/bin/bash      # shell文件开头, 用来指定该文件使用哪个解释器 ...