Vue中如何实现首次点击时获取异步函数返回的ref变量_rawValue值

问题原因 #

logIn是异步Promise函数，调用后会立即执行后续的console.log，此时登录请求还未完成，data还未被赋值，所以首次打印为空；第二次点击时，之前的请求已经完成，data已有值，所以能打印出结果。

解决方案 #

1. 优化外部脚本的logIn函数（可选但更规范）

在Promise的then回调中添加resolve，明确标记异步操作完成，并可传递返回数据：

let data = ref([]);
const logIn = (email_address,password) => {
  return new Promise((resolve, reject) => {
    api
      .get("api.php", {params: {email_address: email_address, password: password}})
      .then((response) => {
       data.value = response.data.data;
       resolve(data.value); // 标记Promise完成，传递数据
      })
      .catch((error) => {
        reject(error);
      });
  });
};

2. 修改当前脚本的logInTaara函数

将其改为异步函数，通过await等待logIn的异步操作完成后，再访问data的值（注意使用Vue ref的标准.value访问，避免使用私有属性_rawValue）：

import { logIn, data } from "../../../composable/taaraComposable";

const logInTaara = async (pay1,pay2) => {
  await logIn(pay1,pay2); // 等待登录请求完成
  console.log(data.value); // 访问ref的标准方式
};

替代方案（不用async/await）

如果不想使用async/await，也可以通过Promise的.then回调处理：

const logInTaara = (pay1,pay2) => {
  logIn(pay1,pay2)
    .then(() => {
      console.log(data.value);
    })
    .catch(error => {
      console.error("登录失败：", error); // 处理错误
    });
};

关键注意点 #

• 永远不要直接访问Vue ref的私有属性（如_rawValue），这类属性不属于公开API，可能随Vue版本更新而变化，官方推荐使用.value来访问和修改ref的值。
• 异步操作必须等待完成后，才能获取其产生的结果，这是JavaScript异步编程的基本规则。

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