Vue问题：执行fetch请求后数据无法加载

首先明确：不需要等待组件挂载后再调用fetchData。在Vue 3的<script setup>中，顶层代码会在组件实例创建完成后、挂载之前执行，这个时机发起请求完全合理，不是导致数据加载失败的原因。

你可以从以下几个方向排查问题：

• 检查跨域限制（CORS）
  浏览器的同源策略会阻止前端直接请求不同域名的接口，打开浏览器控制台的「Network」面板，查看请求状态：

  • 如果出现CORS相关错误，说明目标接口未允许你的前端域名跨域。开发环境下可通过Vite/Vue CLI的代理配置绕过限制，比如在vite.config.ts中添加：

    export default defineConfig({
      server: {
        proxy: {
          '/api': {
            target: 'https://www.eventcinemas.com.au',
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, '')
          }
        }
      }
    })
    

    之后将请求地址改为/api/Movies/GetNowShowing。

• 确认接口返回格式与请求状态
  在fetchData中添加日志，排查请求是否成功、返回内容是否为合法JSON：

  const fetchData = async () => {
      movieData.value = null;
      try {
          const res = await fetch('https://www.eventcinemas.com.au/Movies/GetNowShowing');
          console.log('请求状态:', res.status); // 确认状态码是否在200-299范围内
          if (!res.ok) {
              throw new Error(`请求失败: ${res.status}`);
          }
          movieData.value = await res.json();
          console.log('返回数据:', movieData.value); // 在脚本内打印数据，比模板写法更规范
      } catch (error) {
          console.error('请求错误详情:', error); // 这里会输出具体错误，比如JSON解析失败
      }
  };
  

• 修正模板中的不规范写法
  模板里的{{ console.log(movieData) }}会触发多次执行，不符合Vue模板最佳实践，建议移除，改用脚本内的watch监听数据变化：

  import { watch } from 'vue';
  watch(movieData, (newVal) => {
      console.log('数据更新:', newVal);
  }, { immediate: true });
  

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