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

把 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 的时候才渲染数据，感觉获取用户信息这个操作时异步的，还没处理就已经走到下一步了。