# 处理返回数据

URL: https://caijiao.org/axios/response/handle-data
Source: docs/axios/response/handle-data.md
Description: 本章节讲解如何使用 Axios 获取接口响应数据，并进行解析、格式化和使用，包括处理嵌套数据、判断返回状态以及结合前端逻辑进行展示，帮助开发者高效处理请求返回结果。

在实际开发中，Axios 返回的响应对象需要经过处理才能在前端使用。通常关注 `response.data` 字段，但根据接口返回格式可能需要额外解析。

## 1. 基本处理

```javascript
import axios from "axios";

axios
  .get("https://api.example.com/users/123")
  .then((response) => {
    const user = response.data; // 获取接口返回的数据
    console.log("用户信息：", user);
  })
  .catch((error) => console.error("请求失败：", error));
```

## 2. 解构响应数据

```javascript
axios.get("https://api.example.com/users/123").then(({ data, status }) => {
  if (status === 200) {
    console.log("用户数据：", data);
  } else {
    console.warn("请求未成功，状态码：", status);
  }
});
```

## 3. 处理嵌套数据

接口可能返回嵌套结构：

```javascript
axios.get("https://api.example.com/posts").then(({ data }) => {
  data.forEach((post) => {
    console.log("标题：", post.title);
    console.log("作者：", post.author.name);
  });
});
```

## 4. 结合前端逻辑使用

```javascript
async function loadUsers() {
  try {
    const { data } = await axios.get("https://api.example.com/users");
    const activeUsers = data.filter((user) => user.status === "active");
    console.log("活跃用户列表：", activeUsers);
  } catch (error) {
    console.error("加载用户失败：", error);
  }
}
loadUsers();
```

---

> 💡 小提示：处理返回数据时，除了获取 `data` 外，还可以结合状态码、接口约定字段、分页信息等进行逻辑处理，使前端展示与业务逻辑更加可靠。