vue一个页面发出多个异步请求_踩坑 ：vue2 ajax异步请求数据，层数太多，页面无法渲染...

刚接触vue2不是太久，勉强算是小白一枚吧，在此分享一下我最近踩的一个坑，望以后的小白们借鉴；

首先，数据结构：

data(){

return {

outer： {

mid: [{

inner: ""

}]

}

}

},

数据大致就是这样子，反正封了很多层，至于为什么这么分，大概是因为惯性思维的原因，里层的东西一定都是包含于外层，下意识的就这么写了，简直害死人，不过，这些都不是重点，重点在后面的数据更新以及页面渲染，嗯，最开始我是这么写的

queryInfo (index){

var condition = ....,

http.api({

url: '/tv/orderForm/ClickDetail',

params: condition,

successCallback: function (data) {

this.outer.mid[index].inner = data;

}.bind(this)

})

}

(http.api只是公司的老前辈们将ajax请求进行了一下封装，由于这不是重点，就不说了。)

以一个android开发出身的我来看，这代码看上去没毛病啊，但是运行之后发现虽然inner的值确实改变了，但是页面就是不渲染，我靠，这是肿么了，先百度一波，然后代码就成了这样

queryInfo (index){

var condition = ....;

http.api({

url: '/tv/orderForm/ClickDetail',

params: condition,

successCallback: function (data) {

this.$set(this.outer.mid[index], 'inner' ,data);

}.bind(this)

})

}

都说，当数据不是data的第一层，而是包了几层之后，=赋值是不会触发页面渲染的，要用$set(obj,key,val),但是结果还是然并卵，接着百度，偶然之间看到一个标题，vue ajax请求提前渲染什么的，

大致说的是，ajax请求一般是异步的，vue并不知道你在这里发了ajax请求，所以就不会说等到你执行完毕完成赋值之后再渲染，所以值虽然附近去了，但是页面上显示的还是原来的，恩，讲的好有道理啊，但

是木有讲怎么解决啊，于是，下面这个版本的代码又出来了

queryInfo (index){

var condition = ....;

var self = this;

http.api({

url: '/tv/orderForm/ClickDetail',

params: condition,

successCallback: function (data) {

self.$set(self.outer.mid[index], 'inner' ,data);

}

})

}

就是在发送请求之前，使用一个中间变量将this，也就是vue对象保存了一下，原理是什么的，大家可以看看这个https://segmentfault.com/q/1010000007376594?_ea=1326047，不过，发现这样

写了之候还是没有刷新出来，因为要提前保存this的原因是ajax请求中的this的指的并不是组件了，但是看了一下公司封装的http，通过.bind(this)绑定的就是组件对象，很好，这没毛病，但是，又白忙活

了。擦，郁闷！

憋了一阵之后，最终版的代码出现了

{{updateLog}}

data(){

return {

updateLog: 1,

outer: {...}

}

}

queryInfo (index){

var condition = ....;

var self = this;

http.api({

url: '/tv/orderForm/ClickDetail',

params: condition,

successCallback: function (data) {

self.$set(self.outer.mid[index], 'inner' ,data);

self.updateLog = self.updateLog + 1;

}

})

}

大致就是在data的最外层加上了一个updateLog对象，并在template模板中进行了数据绑定，最后在ajax请求中进行了数据更新，促使页面渲染(数据之后一层的时候是会重新渲染的)，到这里，问题完美

解决，虽然是取了巧，但是达到了预期的效果。

所以：以后写数据结构千万不要惯性的一层包一层，能拿出来就拿出来，不能拿出来想办法把它拿出来，实在没办法了，就可以像我这样取个巧了。

这个坑就踩到这里了，希望对以后来踩坑的小伙伴们有帮助，当然，也欢迎各位大神们的指点：)

补充于18年1月15日: 数据改变页面不刷新，很大可能是因为绑定的数据模型最初是没有这个属性的，如一个 student , 绑定的时候只有 name 和 id 属性，后来在 vue 页面编辑的过程中又给他添加了一个

age 属性，这是候你的这个 age 变化就不会触发 vue 的页面刷新，所以不要随便在 页面编辑的过程中给你的数据结构添加可能导致页面变化的属性。