axios怎么用json

Axios 中如何处理 JSON 数据：从请求到响应的全面指南**

在现代 Web 开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，已经成为前后端数据交互的主流方式，Axios 作为一款流行的基于 Promise 的 HTTP 客户端，在处理 JSON 数据方面提供了非常便捷和强大的支持，本文将详细介绍如何在 Axios 中使用 JSON，包括发送 JSON 数据请求和处理 JSON 响应。

为什么 Axios 与 JSON 是黄金搭档？

广泛支持：几乎所有现代 API 都使用 JSON 作为数据格式。
JavaScript 原生支持：JSON 是 JavaScript 的一个子集，可以直接被 JSON.parse() 和 JSON.stringify() 处理，与 Axios 的 Promise 链式调用完美结合。
Axios 的默认行为：Axios 对 JSON 数据有良好的内置支持，简化了许多常见的操作。

使用 Axios 发送 JSON 数据请求

当我们向后端 API 发送数据（POST、PUT 请求）时，通常需要将 JavaScript 对象转换为 JSON 格式作为请求体，Axios 提供了多种方式来实现这一点。

直接设置 `data` 属性（推荐）

Axios 会自动检查 data 属性中数据的类型，如果传入的是一个普通 JavaScript 对象（Object），Content-Type 请求头没有被显式设置为非 application/json，Axios 会自动将该对象序列化为 JSON 字符串，并自动设置 Content-Type 为 application/json。

示例：发送 POST 请求，JSON 数据

import axios from 'axios';
// 要发送的 JavaScript 对象
const userData = {
  username: 'john_doe',
  email: 'john@example.com',
  age: 30
};
axios.post('https://api.example.com/users', userData)
  .then(response => {
    console.log('响应数据:', response.data);
    console.log('状态码:', response.status);
  })
  .catch(error => {
    console.error('请求错误:', error);
  });

内部工作原理：

Axios 检测到 userData 是一个对象。
自动调用 JSON.stringify(userData) 将其转换为 JSON 字符串。
自动设置请求头 Content-Type: application/json。
发送请求。

手动设置 `Content-Type` 和序列化（不常用，但了解无妨）

虽然 Axios 会自动处理，但在某些特殊情况下，你可能需要手动控制。

示例：手动设置

import axios from 'axios';
const userData = {
  username: 'jane_doe',
  email: 'jane@example.com'
};
axios.post('https://api.example.com/users', 
  JSON.stringify(userData), // 手动序列化
  {
    headers: {
      'Content-Type': 'application/json'
    }
  }
)
.then(response => {
  console.log('响应数据:', response.data);
})
.catch(error => {
  console.error('请求错误:', error);
});

注意：这种方式不如第一种简洁，通常不需要手动执行。

发送嵌套或复杂 JSON 对象

对于复杂的 JavaScript 对象（包含嵌套对象、数组等），Axios 同样能够正确处理，将其序列化为合法的 JSON 结构。

示例：

const complexData = {
  user: {
    id: 123,
    name: 'Alice',
    roles: ['admin', 'editor']
  },
  metadata: {
    createdAt: '2023-10-27T10:00:00Z',
    tags: ['backend', 'api']
  }
};
axios.post('https://api.example.com/complex-endpoint', complexData)
  .then(response => {
    console.log('成功发送复杂数据:', response.data);
  });

处理 JSON 响应

当服务器返回 JSON 数据时，Axios 同样提供了便捷的处理方式。

Axios 自动解析 JSON 响应（默认行为）

默认情况下,如果服务器响应的 Content-Type 是 application/json，Axios 会自动将响应体（response.data）解析为 JavaScript 对象或数组，你不需要手动调用 JSON.parse()。

示例：

axios.get('https://api.example.com/users/1')
  .then(response => {
    // response.data 已经是被解析的 JavaScript 对象
    console.log('用户名:', response.data.username);
    console.log('邮箱:', response.data.email);
  })
  .catch(error => {
    console.error('获取用户数据失败:', error);
  });

内部工作原理：

Axios 检查响应头 Content-Type。
如果是 application/json，则自动调用 JSON.parse(response.data)。
将解析后的结果赋值给 response.data。

手动解析 JSON 响应（非默认情况）

如果服务器返回的 Content-Type 不是 application/json（text/plain），但实际数据是 JSON 格式，你需要手动解析。

示例：

axios.get('https://api.example.com/data-plain-json', {
  // 假设服务器返回的是 text/plain 但内容是 JSON
  headers: {
    'Accept': 'text/plain' // 或者不设置，让服务器返回原始数据
  }
})
  .then(response => {
    // response.data 是字符串，需要手动解析
    const jsonData = JSON.parse(response.data);
    console.log('手动解析后的用户名:', jsonData.username);
  })
  .catch(error => {
    console.error('请求或解析错误:', error);
  });

完整示例：发送 JSON 请求并接收 JSON 响应

下面是一个结合了发送 JSON 请求和处理 JSON 响应的完整示例。

import axios from 'axios';
// 创建一个新的 Axios 实例（可选，用于配置默认值）
const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json', // 虽然axios会自动设置，但显式设置更清晰
    'Accept': 'application/json'
  }
});
// 函数：创建新用户
function createUser(userData) {
  return apiClient.post('/users', userData)
    .then(response => {
      console.log('用户创建成功:', response.data);
      return response.data; // 返回解析后的JSON数据
    })
    .catch(error => {
      if (error.response) {
        // 服务器返回了错误状态码 (4xx, 5xx)
        console.error('服务器响应错误:', error.response.status, error.response.data);
      } else if (error.request) {
        // 请求已发出但没有收到响应
        console.error('网络错误或无响应:', error.request);
      } else {
        // 设置请求时出错
        console.error('请求配置错误:', error.message);
      }
      throw error; // 可以选择重新抛出错误或返回一个错误对象
    });
}
// 使用函数
const newUser = {
  name: 'Bob Smith',
  email: 'bob.smith@example.com',
  isActive: true
};
createUser(newUser)
  .then(createdUser => {
    console.log('新用户ID:', createdUser.id);
    // 可以继续进行其他操作，比如获取该用户信息
    return getUserById(createdUser.id);
  })
  .then(retrievedUser => {
    console.log('获取到的用户信息:', retrievedUser);
  })
  .catch(error => {
    console.error('整个流程出错:', error);
  });
// 辅助函数：根据ID获取用户
function getUserById(userId) {
  return apiClient.get(`/users/${userId}`)
    .then(response => response.data);
}

总结与最佳实践

发送 JSON 数据：直接将 JavaScript 对象作为 data 参数传递给 Axios 的请求方法（如 post, put），Axios 会自动处理序列化和 Content-Type 设置。
接收 JSON 响应：默认情况下，Axios 会自动将 Content-Type 为 application/json 的响应体解析为 JavaScript 对象，直接使用 response.data 即可。
错误处理：始终使用 .catch() 或 try...catch (配合 async/await) 来处理请求过程中可能发生的错误，包括网络错误、服务器错误和数据处理错误。
配置 Axios 实例：对于重复使用的 API 配置（如 baseURL、headers），创建 Axios 实例是一个好习惯，可以避免代码重复。
显式设置 Content-Type：虽然 Axios 会自动设置，但在需要明确控制或覆盖默认行为时，可以手动在 headers 中指定 Content-Type: application/json。