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或者调用这个方法的对象。