小程序获取用户信息后渲染问题

把wx.getUserProfile方法封装到了util.ts中:

export function getUserInfo() {
    wx.getUserProfile({
      desc: '申请获取头像昵称信息',
      success: (res)=>{
        getApp<IAppOption>().globalData.userInfo =res.userInfo
        wx.setStorageSync('userInfo', res.userInfo)
      },
      fail: ()=>{
        wx.showToast({
          icon: 'error',
          title: '获取信息失败'
        })
      }
    })
  }

然后有个页面需要点击获取用户头像,获取成功后更新用户头像:

// import {getUserInfo} from "../../utils/util";
data: {
    userInfo: {
        avatarUrl: '',
    },
},
onGetUserInfo() {
    getUserInfo()
    this.setData({
        userInfo: getApp<IAppOption>().globalData.userInfo
    })
},

点击按钮,会出来授权信息,但还没来得及选择就已经报如下信息:

Setting data field "userInfo" to undefined is invalid.

即使点了确定,头像也不刷新,各种加async和await也不管用。现在有这么几个问题:

  • 开始想在getUserInfo中的success里直接返回信息,但是在会报错,需要fail中也返回用户信息,但是都fail了,也没法返回信息啊。
  • 如何调用getUserInfo()时只success的时候才渲染数据,感觉获取用户信息这个操作时异步的,还没处理就已经走到下一步了。
讨论数量: 3

你需要的是Promise。举个例子

2年前 评论
meitian (楼主) 2年前

获取头像信息是有时间的,都还没有获取到就设置了,不就报错了
这种加个成功那的回调来设置

2年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!