Axios 请求示例 res.data.data

以下是 this.users = res.data.data 的完整可运行示例 （基于 Vue 3 + Axios，Vue 2 写法仅需微调），包含「后端接口模拟」+「前端请求代码」+「数据解析」全流程，帮你直观理解两个 data 的作用：

一、模拟后端接口返回格式

先明确后端接口（比如 /api/users）返回的 JSON 结构（这是 HTTP 响应体的内容）：

json

// 后端接口 /api/users 返回的完整 JSON（HTTP 响应体）
{
  "code": 200,        // 业务状态码（后端自定义）
  "message": "查询用户列表成功", // 业务提示信息
  "data": [           // 后端自定义的「业务数据包」（真正的用户数据）
    { "id": 1, "name": "张三", "age": 25, "email": "zhangsan@test.com" },
    { "id": 2, "name": "李四", "age": 28, "email": "lisi@test.com" },
    { "id": 3, "name": "王五", "age": 30, "email": "wangwu@test.com" }
  ]
}

二、前端完整代码示例（Vue 3 组件）

vue

<template>
  <div class="user-list">
    <h3>用户列表</h3>
    <ul>
      <!-- 渲染 users 数据 -->
      <li v-for="user in users" :key="user.id">
        {{ user.name }}（{{ user.age }}岁）- {{ user.email }}
      </li>
    </ul>
  </div>
</template>

<script setup>
// 1. 引入 axios（需先安装：npm install axios）
import axios from 'axios';
import { ref, onMounted } from 'vue';

// 2. 定义响应式数据 users（最终要赋值的变量）
const users = ref([]);

// 3. 定义请求用户列表的函数
const getUserList = async () => {
  try {
    // 发送 GET 请求到后端接口
    const res = await axios.get('/api/users');

    // 核心代码：解析两层 data 并赋值
    // 第一个 res.data：Axios 封装的「响应体容器」（装着后端返回的完整 JSON）
    // 第二个 .data：后端 JSON 里的「业务数据包」（用户列表）
    users.value = res.data.data;

    // 【可选】打印调试，直观看到数据结构
    console.log('Axios 封装的完整响应对象 res：', res);
    console.log('Axios 的响应体容器 res.data：', res.data);
    console.log('后端的业务数据包 res.data.data：', res.data.data);
  } catch (error) {
    // 错误处理（比如接口请求失败）
    console.error('请求用户列表失败：', error);
    console.error('错误状态码：', error.response?.status);
    console.error('错误信息：', error.response?.data);
  }
};

// 4. 组件挂载后执行请求
onMounted(() => {
  getUserList();
});
</script>

三、关键日志输出（帮你理解数据结构）

运行代码后，控制台会打印出以下内容（对应注释里的调试打印）：

1. console.log('Axios 封装的完整响应对象 res：', res)

javascript

{
  data: { // 第一个 data（Axios 的响应体容器）
    code: 200,
    message: "查询用户列表成功",
    data: [ // 第二个 data（后端的业务数据包）
      { id: 1, name: "张三", age: 25, email: "zhangsan@test.com" },
      { id: 2, name: "李四", age: 28, email: "lisi@test.com" },
      { id: 3, name: "王五", age: 30, email: "wangwu@test.com" }
    ]
  },
  status: 200, // HTTP 状态码
  statusText: "OK",
  headers: { "content-type": "application/json; charset=utf-8" },
  config: { url: "/api/users", method: "get", ... },
  request: XMLHttpRequest { ... }
}

2. console.log('Axios 的响应体容器 res.data：', res.data)

javascript

{
  code: 200,
  message: "查询用户列表成功",
  data: [
    { id: 1, name: "张三", age: 25, email: "zhangsan@test.com" },
    { id: 2, name: "李四", age: 28, email: "lisi@test.com" },
    { id: 3, name: "王五", age: 30, email: "wangwu@test.com" }
  ]
}

3. console.log('后端的业务数据包 res.data.data：', res.data.data)

javascript

[
  { id: 1, name: "张三", age: 25, email: "zhangsan@test.com" },
  { id: 2, name: "李四", age: 28, email: "lisi@test.com" },
  { id: 3, name: "王五", age: 30, email: "wangwu@test.com" }
]

四、Vue 2 版本适配（如果用 Vue 2）

仅需调整组件写法，核心的 res.data.data 逻辑完全不变：

vue

<template>
  <!-- 模板部分和 Vue 3 一致 -->
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [] // 定义 users 数据
    };
  },
  mounted() {
    this.getUserList();
  },
  methods: {
    async getUserList() {
      try {
        const res = await axios.get('/api/users');
        // 核心赋值逻辑完全一样
        this.users = res.data.data;
      } catch (error) {
        console.error('请求失败：', error);
      }
    }
  }
};
</script>

五、关键说明

1. 接口模拟 ：如果没有真实后端接口，可先用 axios-mock-adapter 模拟：

   javascript

   import axios from 'axios';
   import MockAdapter from 'axios-mock-adapter';
   
   // 创建 mock 实例
   const mock = new MockAdapter(axios);
   // 模拟 /api/users 接口返回
   mock.onGet('/api/users').reply(200, {
     code: 200,
     message: "查询用户列表成功",
     data: [
       { id: 1, name: "张三", age: 25, email: "zhangsan@test.com" },
       { id: 2, name: "李四", age: 28, email: "lisi@test.com" }
     ]
   });

2. 核心不变 ：无论 Vue 2/3，也无论接口是 GET/POST，res.data（Axios 容器）和 res.data.data（后端业务数据）的逻辑始终一致；

3. 字段变化适配 ：如果后端把业务数据字段从 data 改成 list，只需把 res.data.data 改成 res.data.list 即可。

这个示例覆盖了「请求→响应→解析→渲染」全流程，你可以直接复制运行（记得安装 axios），通过控制台日志就能清晰看到两个 data 的具体内容和作用～

六、安装vue axios

npm install --save axios vue-axios