Vue中如何展示Axios请求响应？新手求助

先梳理你代码里可能导致无法展示响应内容的几个问题，逐个解决：

1. 变量作用域问题 #

你用ref创建的text变量，必须处于Vue组件的可访问作用域内：

• 要是用Vue3的<script setup>语法，直接写没问题，但要确保已经导入ref和axios；
• 要是用选项式API，得把text放在setup()函数里，并且return出去，不然模板根本读不到这个变量。

举个<script setup>的正确写法：

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const text = ref(undefined);
const anotherVar = {}; // 你的请求参数数据

axios.post('api', anotherVar).then(function (response) {
  if (response.data.error) {
    text.value = response.data.error;
    console.log(text.value);
  } else {
    console.log('Everything is OK');
  }
});
</script>

<template>
  <p v-if="text !== undefined">{{ text }}</p>
</template>

选项式API的写法：

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const text = ref(undefined);
    const anotherVar = {};

    axios.post('api', anotherVar).then(function (response) {
      if (response.data.error) {
        text.value = response.data.error;
        console.log(text.value);
      } else {
        console.log('Everything is OK');
      }
    });

    return { text }; // 必须return，模板才能拿到变量
  }
};
</script>

<template>
  <p v-if="text !== undefined">{{ text }}</p>
</template>

2. v-if判断逻辑问题 #

你原来写的v-if="text"，如果response.data.error是空字符串、0这类假值，就算赋值了页面也不会显示。可以改成v-if="text !== undefined"，只要text被赋值（哪怕是空内容）都能展示；如果只想显示非空的错误信息，保留v-if="text"就行。

3. 未处理请求失败的情况 #

如果axios请求本身失败（比如网络断开、服务器报错），then里的代码不会执行，text会一直是undefined，页面啥也不显示。可以加个catch捕获错误：

axios.post('api', anotherVar)
  .then(function (response) {
    if (response.data.error) {
      text.value = response.data.error;
      console.log(text.value);
    } else {
      console.log('Everything is OK');
    }
  })
  .catch(function (error) {
    // 请求失败时的处理，比如显示错误提示
    text.value = '请求失败：' + error.message;
    console.error(error);
  });

验证步骤 #

1. 打开浏览器控制台，检查有没有ref未导入、axios未定义这类基础报错；
2. 确认axios请求已经成功发送，查看服务器返回的response.data结构是否符合预期（有没有error字段）；
3. 核对text.value确实被赋值（看你console.log输出的内容）

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