Vue.js 中 Axios 请求返回数据 undefined 的问题排查与解决-小浪学习网

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

本文旨在帮助开发者解决在使用 vue.JS 和 axios 进行 API 请求时，遇到的返回数据为 undefined 的问题。文章将深入分析问题原因，提供详细的 typescript 类型定义、Axios 请求的最佳实践以及调试技巧，确保数据能够正确渲染到 Vue.js 组件中。

问题分析

当在 Vue.js 应用中使用 Axios 发起 API 请求，并在控制台中看到 Cannot read properties of undefined (reading ‘data’) 错误时，通常意味着以下几个方面存在问题：

响应数据结构不匹配： TypeScript 类型定义与实际 API 返回的数据结构不一致。
Axios 请求处理不当： 可能在处理 Axios 响应时，访问了错误的属性或使用了不正确的异步处理方式。
API 接口问题： API 接口本身可能存在问题，导致返回的数据格式不正确。

解决方案

1. 准确定义 TypeScript 类型

首先，确保 TypeScript 类型定义与 API 返回的 json 结构完全匹配。根据示例 JSON 响应，正确的类型定义应如下所示：

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

这里，TestResponse 接口定义了单个数据对象的结构，而 TestResponseRO 接口定义了包含数据数组和元数据的完整响应对象的结构。

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

2. 优化 Axios 请求处理

使用 async/await 简化异步请求处理，避免 .then 的嵌套，使代码更易读且不易出错。同时，正确访问响应数据。

import axios, { AxiosInstance } from 'axios';  const request: AxiosInstance = axios.create({   baseURL: 'your_api_base_url', // 替换为你的 API 基础 URL   headers: {     'content-type': 'application/json',   }, });  export const api = {   async getTest() {     try {       const res = await request.get<TestResponseRO>('/v1/test');       console.log(res.data); // 打印完整的响应数据       return res.data; // 返回响应数据     } catch (err) {       console.Error('Error fetching data:', err);       throw err; // 抛出错误，以便在调用方处理     }   }, };

注意：

将 baseURL 替换为实际的 API 基础 URL。
在 catch 块中，建议抛出错误，以便在调用 getTest 函数的地方进行统一的错误处理。

3. Vue.js 组件中使用 API

在 Vue.js 组件中，正确调用 API 并处理返回的数据。

import { ref } from 'vue'; import { api } from './api'; // 确保路径正确 import { TestResponse } from './types'; // 确保路径正确  export default {   name: 'Test',   setup() {     const firstName = ref('');     const lastName = ref('');      const submit = async () => {       try {         const response = await api.getTest();          if (response && response.data && response.data.Length > 0) {           firstName.value = response.data[0].firstName;           lastName.value = response.data[0].lastName;           console.log('Name:', firstName.value, lastName.value);         } else {           console.warn('No data received from API.');         }       } catch (error) {         console.error('Error while getting the response:', error);       }     };      return {       firstName,       lastName,       submit,     };   }, };

关键点：