HTML object显示为{ }，点开后下方显示有数据，却无法读到

1、问题描述

笔者在做前端的时候，发现报object无法读取的错误，而输出以后在前端显示{ }（正常来说，这是个空的object）。点击这个“{ }”下方却成功显示出来了相应的数据，只是其他函数无法读取。

2、问题分析

笔者最终的解释是，
1、这个object确实为空，因此其他函数在他为空的时候自然读不到数据。
2、至于为什么点击可以显示，笔者认为是后面加载到的数据，比如后端查询刚刚返回结果这样。

3、如何解决

整体的思路是：控制加载流程，让依赖于这个object的其他函数必须等待他加载完之后才能运行。
例如：
1、笔者使用ajax从后端异步查询数据，如果其他依赖于这些数据的函数简单的并行，则其他函数没有等到返回结果就已经运行，自然取不到数据；
2、这时候应该把这些函数放在success里面，即成功返回才执行这些函数，否则执行error中的容错机制。

4、思考

1、异步查询固然快捷，加快了网站的加载速度，但是具体的函数流程一定要控制好，先执行前面的函数，才能使用这些数据。同时要注意如果函数没有成功执行，是否会对其他函数造成影响，是否有容错机制应对这些错误，比如：
（1）预定义一份数据，当前后端交互出错的时候，使用这份数据使得后续流程可以正常执行，但注意给用户提示和记录在后台方便后续解决；
（2）或者终止这一条流程，仅保证最低服务，如详细描述错误、提示用户稍后访问等。
2、对于ajax这种前后端交互响应慢的问题，尽量保证查询的表中没有多余数据。也就是说，传过去查询条件，可以直接作为主键查询，并立即返回结果。而不是需要遍历一次所有数据的大表，这会很慢。
为了达到这个目的，可以用中间表提前存储可能用到的查询结果，查询时直接到中间表来找即可。