【踩坑__ob__: Observer实录】关键还是异步

项目背景

折腾了三四个小时，终于弄好了，虽然还有一些不明白的，但还是记录一下。

当我看到这个打印顺序的时候，就知道我终于成功了哈哈哈哈哈。

项目说明：

批量往数据库中添加数据。rest里面是键值对的形式，然后调用this.$service接口传到后端去，添加就好了。

昨天提交代码之后，老师说这样效率比较低，因为数据可以打包一起添加，所以没用必要边遍历边添加。所以需要改进。另外一个问题，刷新的功能没用实现，是个bug。

下面来解决：

首先解决刷新的问题吧cool-admin的组件，刷新的功能应该是在添加数据之后刷新，而我的bug产生在需要手动刷新，数据才能添加进去，判断是因为添加数据是进行异步操作，所以刷新这个同步事件会先执行，那么使用promise.then()解决

下面来解决将数据打包到数组中，然后添加。

也就是在这里碰到了__ob__: Observer.

我的处理方式：定义了一个全局变量作为数组，然后将每一次的数据push进去。这个地方如果是直接let一个数组=[]，然后将数据push进去的话，后面使用它的时候，因为作用域的原因，貌似会得到一个空数组。所以定义的全局变量。

然后这个地方打印this.arr，拿到数据了，于是我直接传递给addMore函数了。 

 数据长这样：是的一个带有ob:Observer的数据。我在addMore那也查看到了，数据是这个数组，但是操作了，页面毫无变化，数据库也没变化

 于是打开开发者工具，查看网络请求，发现请求中的数组根本就是个空的。

这个项目以前做过类似的，然后我去那个地方也查看了一波就发现了两者的差异，那个数组上没有显示_ob_:Observer.

那就来解决这个。于是我就搜索了很多，对于这个究竟是什么大家可以看看这个博客

_ob_:Observer

网上有很多解决办法，其中有一种十分简单

 我理解的这串代码的目的就是深拷贝一份原来数组的值。于是我也试了，发现我这样做根本就直接得到空的数组。

然后我就开始乱打印了，是数据传递的地方我全部打印了一遍，终于让我发现了问题。

this.arr.push()中有一串代码是异步执行的，我在那个异步函数(函数A)那打印了一些东西，最后发现，this.arr的打印甚至在函数A前面打印。说到底就是异步的原因。最前面那个图就是最终我改动好了以后正确的执行步骤，应该是函数A先执行，然后在执行this.arr的传值，否则代码不是正确执行的，数据传递也不会完整，我觉得这才是真正的原因。

于是我加了个定时器，在定时器中执行传值。

问题解决。

在解决问题之后 我还是在定时器中打印了this.arr，这一次虽然这个数组身上依旧是有_ob_:Observer,但是为什么我可以拿到this.arr[0],this.arr[1]这些值，按照网上都说的不可枚举性，不应该是拿不到的吗，确实我在没有处理异步的时候获取this.arr[0]也拿不到，是undefined，但是处理以后的_ob_:Observer，是不是枚举性就被破坏了。挖个坑，希望有大佬能来解惑，@&@