Vue中如何将回调函数值存入data？showAddress后this.zuobiao为空原因

1. 如何将回调函数的结果存入Vue的data中？ #

你当前的写法是正确的：在回调函数中通过this.zuobiao = res.result.address赋值即可，前提是必须在Vue的data选项中提前声明zuobiao，比如：

data() {
  return {
    zuobiao: ''
  }
}

另外你使用了箭头函数作为回调，这能保证this指向Vue实例，避免了普通函数中this指向丢失的问题，这部分处理没问题。

2. 调用showAddress后无法打印this.zuobiao的原因？ #

核心是异步操作的时序问题：

• showAddress内部调用的qqmapsdk.reverseGeocoder是异步HTTP请求，它的success回调要等请求完成（拿到腾讯地图返回的数据）后才会执行。
• 你在调用this.showAddress()后立刻执行console.log(this.zuobiao)，这时候异步请求还没完成，this.zuobiao = res.result.address这行代码根本没执行，所以打印的是data中声明的初始空值。

3. 改造代码实现正确的异步赋值与结果获取 #

你之前尝试async/await和Promise.then无效，是因为showAddress没有返回Promise。只需把showAddress改造成返回Promise的形式，就能按预期处理异步逻辑：

第一步：改造showAddress函数返回Promise #

showAddress(longitude, latitude) {
  return new Promise((resolve, reject) => {
    const qqmapsdk = new QQMapWX({
      key: 'PU7BZ-42SKX-SVF4G-PE7K2-ZMFD7' // 使用你自己的密钥
    });
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: latitude,
        longitude: longitude
      },
      success: (res) => {
        this.zuobiao = res.result.address; // 赋值到data
        resolve(res.result.address); // 把结果传递给外部调用
      },
      fail: (error) => {
        reject(error); // 处理请求失败的情况
      }
    });
  });
}

第二步：修改getUserProfile使用async/await等待异步结果 #

async getUserProfile() {
  uni.getLocation({
    type: 'gcj02 ',
    geocode: true,
    success: async (res) => {
      // 等待showAddress的异步请求完成
      await this.showAddress(res.longitude, res.latitude);
      // 此时赋值已完成，可以正常获取this.zuobiao
      console.log(this.zuobiao);
      uni.showModal({
        content: '坐标：' + this.zuobiao
      })
    },
    fail: (err) => {
      console.error('获取地理位置失败:', err);
    }
  });
}

可选：把uni.getLocation也封装成Promise，让流程更统一 #

getUserProfile() {
  // 将uni.getLocation转换为Promise
  const getLocPromise = new Promise((resolve, reject) => {
    uni.getLocation({
      type: 'gcj02 ',
      geocode: true,
      success: resolve,
      fail: reject
    });
  });

  getLocPromise
    .then(async (locRes) => {
      await this.showAddress(locRes.longitude, locRes.latitude);
      console.log(this.zuobiao);
      uni.showModal({
        content: '坐标：' + this.zuobiao
      });
    })
    .catch(err => {
      console.error('操作失败:', err);
    });
}

内容的提问来源于stack exchange，提问作者onenoodlesin