Vue.js 中 Axios 请求返回 Undefined 的问题排查与解决-js教程-PHP中文网

Vue.js 中 Axios 请求返回 Undefined 的问题排查与解决

碧海醫心

发布： 2025-08-21 20:02:26

原创

723人浏览过

vue.js 中 axios 请求返回 undefined 的问题排查与解决

问题描述与诊断

在 Vue.js 项目中使用 Axios 获取 API 数据时，经常会遇到控制台输出 undefined 的情况，导致页面无法正确渲染。以下面代码为例，问题可能出现在多个环节：

export interface TestResponse {
  firtName: string
  lastName: string
}

export interface TestResponseRO {
  data: TestResponse[]
  metadata: string
}

登录后复制

const request: AxiosInstance = axios.create({
    baseURL: url.baseUrl,
    headers: {
        'content-type': 'application/json',
    },
    //params: {base64_encoded: 'true', fields: 'stdout'},
});

export const api = {

    async getTest() {
        try{
            return await request.get<TestResponse>("/v1/test")
                .then(res => {
                    console.log("lastname " + res.data.lastName);
                    return res.data
                })
        }catch (err) {
            console.log("error" + err);
        }
    },

}

登录后复制

export default {
    name: "Test",

    setup() {

        const firstName = ref('');
        const lastName = ref('');

        const submit = async () => {
            try {
                const response = await api.getTest()

                if (response != null) {
                    firstName.value = response[0].data.firstName
                    lastName.value = response[0].data.lastName
                    console.log("I am a name " + response.lastName)
                }
            } catch (error) {
                console.log('Error while getting the response:', error)
            }
        }

        return {
          firstName,
          lastName,
          submit
        }

    },

};

登录后复制

解决方案

1. 检查 TypeScript 类型定义

首先，要确保 TypeScript 类型定义与 API 返回的数据结构完全匹配。根据提供的 JSON 响应示例：

{
    "data": [
        {
            "firstName": "Foo",
            "lastName": "Smith"
        },
        {
            "firstName": "Mike",
            "lastName": "vue"
        },
        {
            "firstName": "go",
            "lastName": "lang"
        }
    ],
    "metadata": "none"
}

登录后复制

正确的 TypeScript 类型定义应如下所示：

export interface TestResponse {
  firstName: string;
  lastName: string;
}

export interface TestResponseRO {
  data: TestResponse[];
  metadata: string;
}

登录后复制

注意：

立即学习“前端免费学习笔记（深入）”；

TestResponse 接口定义了单个数据项的结构，包含 firstName 和 lastName 字段。
TestResponseRO 接口定义了整个响应对象的结构，包含 data 字段（类型为 TestResponse 数组）和 metadata 字段。

2. 优化 Axios 请求处理

其次，需要优化 Axios 请求的处理方式。使用 async/await 语法时，无需再使用 .then() 方法。正确的写法如下：

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

import axios, { AxiosInstance } from 'axios';

const request: AxiosInstance = axios.create({
    baseURL: url.baseUrl,
    headers: {
        'content-type': 'application/json',
    },
    //params: {base64_encoded: 'true', fields: 'stdout'},
});

export const api = {
    async getTest() {
        try {
            const res = await request.get<TestResponseRO>("/v1/test");

            console.log(res.data) // Should display '{"data": [your array], "metadata": "none"}'

            return res.data;
        } catch (err) {
            console.error(err);
            return null; // 建议返回 null 或抛出异常，以便在调用方处理错误
        }
    },
}

登录后复制

关键点：

使用 await 关键字等待请求完成，避免了 .then() 的回调地狱。
在 request.get() 方法中指定泛型类型 TestResponseRO，确保 TypeScript 能够正确推断响应数据的类型。
在 catch 块中处理错误，并返回 null 或抛出异常，以便调用方能够感知到错误。

3. Vue 组件中的数据处理

最后，在 Vue 组件中，需要根据 API 返回的数据结构正确访问数据。

import { ref } from 'vue';
import api from './api'; // 假设 api 对象在单独的文件中

export default {
    name: "Test",
    setup() {
        const firstName = ref('');
        const lastName = ref('');

        const submit = async () => {
            try {
                const response = await api.getTest();

                if (response != null && response.data && response.data.length > 0) {
                    firstName.value = response.data[0].firstName;
                    lastName.value = response.data[0].lastName;
                    console.log("First Name: " + firstName.value);
                    console.log("Last Name: " + lastName.value);
                } else {
                    console.warn("No data received from API.");
                }
            } catch (error) {
                console.error('Error while getting the response:', error);
            }
        }

        return {
            firstName,
            lastName,
            submit
        }
    },
};

登录后复制

关键点：

确保 response 不为 null，并且 response.data 存在且不为空数组。
使用 response.data[0].firstName 和 response.data[0].lastName 正确访问数据。
添加错误处理逻辑，例如在没有数据时显示警告信息。

总结与注意事项

类型定义一致性： 确保 TypeScript 类型定义与 API 返回的数据结构完全一致，这是避免 undefined 错误的关键。
async/await 的正确使用： 使用 async/await 简化异步代码，避免回调地狱。
错误处理： 在 catch 块中处理错误，并向调用方传递错误信息。
API 接口调试： 如果问题仍然存在，可以使用 curl 或 Postman 等工具测试 API 接口，确保接口本身能够正确返回数据。
数据校验： 在访问 API 返回的数据之前，进行必要的校验，例如检查 response 是否为 null，以及 response.data 是否存在且不为空。