Vue+TypeScript中Axios异步请求数据渲染异常问题求助

核心问题拆解 #

1. API方法错误处理缺失：原请求方法的catch块仅打印错误但未抛出异常，导致请求失败时Promise会返回undefined，组件拿到空值后无法渲染，也无法感知错误。
2. 组件未正确处理响应式赋值：若直接将Promise对象赋值给渲染变量，而非等待Promise resolve后将数据存入Vue响应式变量，视图不会触发更新。
3. 不稳定渲染的潜在原因：使用index作为v-for的key会导致Vue复用DOM元素时出现异常，是渲染不稳定的常见诱因。

步骤1：修复API请求方法 #

确保请求失败时抛出异常，同时正确映射服务器返回的数据结构：

export const api = {
    async getAllCourses(): Promise<Course[]> {
        try {
            const res = await request.get<ResponseData<Course[]>>("/v1/courses");
            // 服务器返回结构为 { data: Course[], metadata: ... }，所以取res.data.data
            return res.data.data;
        } catch (err) {
            console.error(err);
            // 必须抛出错误，让调用方能够捕获并处理失败场景
            throw err;
        }
    },
}

步骤2：组件中正确实现数据获取与渲染 #

以Vue 3 Composition API为例，确保使用响应式变量存储数据，并处理加载、错误状态：

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { api } from '@/api';
import Course from './Course.vue';

// 用响应式变量存储课程列表
const results = ref<Course[]>([]);
const isLoading = ref(false);
const errorMsg = ref<string | null>(null);

async function fetchCourses() {
    isLoading.value = true;
    errorMsg.value = null;
    try {
        // await等待请求完成，将结果赋值给响应式变量
        results.value = await api.getAllCourses();
    } catch (err) {
        errorMsg.value = '获取课程列表失败';
        console.error(err);
    } finally {
        isLoading.value = false;
    }
}

// 组件挂载时发起请求
onMounted(() => {
    fetchCourses();
});
</script>

<template>
    <!-- 加载状态提示 -->
    <div v-if="isLoading" class="text-center py-8">加载中...</div>
    
    <!-- 错误状态提示 -->
    <div v-else-if="errorMsg" class="text-center py-8 text-red-500">{{ errorMsg }}</div>
    
    <!-- 正常渲染列表 -->
    <div v-else class="grid grid-cols-2 h-4 md:w-4/5 p-4">
        <div 
            class="md:grid-cols-2 lg:grid-cols-1 col-gap-2 md:col-gap-8 md:row-gap-10" 
            v-for='course in results' 
            :key="course.id" <!-- 用课程唯一ID作为key，避免渲染异常 -->
        >
            <Course :course="course"/>
        </div>
    </div>
</template>

如果使用Vue 2 Options API，写法类似：

<script lang="ts">
import { defineComponent } from 'vue';
import { api } from '@/api';
import Course from './Course.vue';

export default defineComponent({
    components: { Course },
    data() {
        return {
            results: [] as Course[],
            isLoading: false,
            errorMsg: null as string | null
        };
    },
    async mounted() {
        this.isLoading = true;
        try {
            this.results = await api.getAllCourses();
        } catch (err) {
            this.errorMsg = '获取课程列表失败';
            console.error(err);
        } finally {
            this.isLoading = false;
        }
    }
});
</script>

关键注意事项 #

• 避免冗余的await+then写法：await已经会等待Promise完成，直接赋值结果即可，无需额外嵌套then。
• 响应式变量是视图更新的核心：必须将请求结果存入Vue的响应式容器（ref/reactive或Options API的data），普通变量无法触发视图更新。
• 禁用index作为v-for的key：使用数据的唯一标识（如course.id）作为key，确保Vue能正确跟踪DOM元素的变化，避免渲染不稳定。

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