uniapp使用uni.request获取后端数据并渲染 | 含如何处理获取到数据无法渲染问题

问题描述：在uniapp中使用uni.request获取后端数据并渲染，但是获取到了数据无法进行全局赋值。

data() {return {array:[]};},onLoad() {this.updateData();}updateData(){uni.request({url:'*****',data:{},header:{'Content-Type':'application/x-www-form-urlencoded'},success:(res)=>{console.log(res)let data = res.data;this.array = data; // 在此步可以获取到数据 }, fail: () => {uni.showToast({icon: 'none',title: '网络异常,请稍后重试'});}}); this.useData();// 调用方法}}useData(){console.log(this.array);// 在此步获取到的数据为初始数据}

• 造成数据无法全局赋值的原因主要是：uni.request是异步请求，此时打印出来的值，其执行机制是：useData方法再到uni.request。
• 如果需要调用函数并渲染到全局，则需要在更改方法的放置位置。

updateData(){uni.request({url:'*****',data:{},header:{'Content-Type':'application/x-www-form-urlencoded'},success:(res)=>{console.log(res)let data = res.data;this.array = data; // 在此步可以获取到数据this.useData(); // 在异步进行调用方法 }, fail: () => {uni.showToast({icon: 'none',title: '网络异常,请稍后重试'});}}); }}

附：箭头函数指向问题

• 使用this直接赋值的方法

uni.request({...success: (res) => {this.data = res.data;//若使用箭头函数则可以进行赋值},fail: (err) => {console.error(err);},});

• 使用that来间接赋值的方法

let that = this; uni.request({...success: function(res){that.data = res.data;//使用that来间接赋值},...});

• 解释：如果success直接写成普通函数的形式，打印出来的this是success函数自身。而将success修改为箭头函数即可拿到Vue实例对象的数据并进行赋值及渲染到页面上。
• 区分：如果是箭头函数，this的指向是上下文作用域，不可能指向对象；如果是普通函数或方法，this指向上一个作用域的this或者调用这个方法的对象。