菜鸟教程
教程 axios tutorial

处理返回数据

在实际开发中，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 外，还可以结合状态码、接口约定字段、分页信息等进行逻辑处理，使前端展示与业务逻辑更加可靠。

相关内容