Vue计算属性无法返回Axios请求响应问题求助

计算属性确实不支持直接返回异步API的响应结果，核心原因如下：

• 计算属性的设计逻辑是同步执行、立即返回值，而Axios发起的HTTP请求是异步操作，then回调里的return res根本不会成为计算属性的返回值。
• 你提供的代码中，else分支里只发起了异步请求，但没有任何return语句，所以计算属性默认返回undefined，和服务器是否响应无关。

代码问题拆解 #

你的itemsChildren计算属性在parentReview不为空时，仅执行了异步请求，但整个else块没有返回任何值。异步回调的return属于回调函数内部，和计算属性的返回值完全无关，自然拿不到API响应结果。

正确的实现方式 #

涉及异步请求的逻辑，应该用watch监听数据变化，配合data存储请求结果，具体步骤如下：

1. 在data中定义存储结果的变量：

data() {
  return {
    parentReview: null,
    itemsChildren: null // 用来保存API返回的结果
  }
}

2. 用watch监听parentReview的变化，触发请求并更新结果：

watch: {
  parentReview(newVal) {
    // 当parentReview为空时，重置结果
    if (!newVal) {
      this.itemsChildren = null;
      return;
    }

    const formData = new FormData();
    formData.append('ID', newVal["ID"]);

    axios({
      method: 'POST',
      url: window.location.origin + '/API/List',
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
        "RequestVerificationToken": document.forms[0].querySelector('input[name="__RequestVerificationToken"]').value,
      }
    }).then(response => {
      // 将API响应结果赋值给data中的变量
      this.itemsChildren = response.data;
    }).catch(error => {
      if ([401, 402, 403].includes(error.response.status)) {
        window.location.href = error.response.headers.expiredtokenredirecturi
      }
      console.log(error.response);
    });
  }
}

如果需要页面初始化时就执行一次请求，可以给watch添加immediate: true：

watch: {
  parentReview: {
    handler(newVal) {
      // 上述请求逻辑
    },
    immediate: true // 初始化时立即执行一次
  }
}

3. 模板中直接使用itemsChildren即可，无需再用计算属性。

补充说明 #

计算属性仅适用于基于现有响应式数据的同步计算场景（比如数组过滤、字符串格式化等），不需要异步操作。所有涉及异步请求的逻辑，都应该放在watch或methods中，将结果存储到响应式变量里供模板使用。

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