axios如何发送json

Axios 发送 JSON 数据：完整指南与最佳实践**

在现代 Web 开发中，前后端数据交互是核心环节之一，而 JSON（JavaScript Object Notation）因其轻量级、易读、易于解析的特点，成为了最常用的数据交换格式，Axios 作为一款基于 Promise 的 HTTP 客户端，广泛应用于浏览器和 Node.js 环境中，能够方便地发送 HTTP 请求，本文将详细介绍如何使用 Axios 发送 JSON 数据，包括 POST、PUT 等常见请求方法,并探讨一些关键配置和最佳实践。

准备工作：安装与引入 Axios

在使用 Axios 之前,确保你已经将其项目或环境中安装并引入。

安装 Axios（如果尚未安装）：使用 npm 或 yarn 进行安装：
```
npm install axios
# 或
yarn add axios
```

引入 Axios：在你的 JavaScript/TypeScript 文件中：

import axios from 'axios';
// 或者在浏览器环境中，如果使用 CDN 引入：
// <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

发送 JSON 数据的核心：`data` 与 `headers`

Axios 发送 JSON 数据时,主要有两个关键点：

data 属性：用于设置请求体（body）中的数据，当你要发送 JSON 数据时，通常会将一个 JavaScript 对象或数组赋值给 data，Axios 会自动将其转换为 JSON 字符串（除非你手动设置了 transformRequest）。
headers 属性：用于设置请求头，对于 JSON 数据，最常见的设置是 'Content-Type': 'application/json'，这告诉服务器请求体中是 JSON 格式的数据，虽然 Axios 在某些情况下会自动设置,但显式设置是更可靠的做法。

常用请求方法发送 JSON 数据

POST 请求发送 JSON 数据

POST 请求常用于提交资源，发送 JSON 数据是其典型应用场景。

示例： 假设我们要向 https://api.example.com/users 发送一个创建用户的 JSON 请求。

const userData = {
  username: 'john_doe',
  email: 'john.doe@example.com',
  age: 30
};
axios.post('https://api.example.com/users', userData, {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  console.log('响应数据:', response.data);
  console.log('状态码:', response.status);
})
.catch(error => {
  if (error.response) {
    // 服务器返回了错误状态码
    console.error('错误响应:', error.response.data);
    console.error('状态码:', error.response.status);
  } else if (error.request) {
    // 请求已发出但没有收到响应
    console.error('无响应:', error.request);
  } else {
    // 请求设置出错
    console.error('请求错误:', error.message);
  }
});

说明：

第二个参数 userData 是我们要发送的 JavaScript 对象，Axios 会默认将其序列化为 JSON 字符串。
headers 中明确设置了 Content-Type: application/json,这是一个好习惯。
.then() 用于处理成功的响应，.catch() 用于捕获请求过程中的错误。

PUT/PATCH 请求发送 JSON 数据

PUT 和 PATCH 请求用于更新资源，发送 JSON 数据的方式与 POST 类似。

PUT 请求示例（替换整个资源）：

const updatedUserData = {
  username: 'john_doe_updated',
  email: 'john.doe.updated@example.com',
  age: 31
};
axios.put('https://api.example.com/users/123', updatedUserData, {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  console.log('更新成功:', response.data);
})
.catch(error => {
  console.error('更新失败:', error);
});

PATCH 请求示例（部分更新资源）：

const partialUpdateData = {
  age: 32
};
axios.patch('https://api.example.com/users/123', partialUpdateData, {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  console.log('部分更新成功:', response.data);
})
.catch(error => {
  console.error('部分更新失败:', error);
});

GET 请求发送 JSON 数据（查询参数）

GET 请求的参数通常是通过 URL 查询字符串（Query String）传递的，而不是在请求体中，但如果需要发送复杂的 JSON 对象作为查询参数，可以手动将其序列化为查询字符串，或者使用 params 配置项让 Axios 帮助处理。

示例：使用 params 发送 JSON 对象作为查询参数

const queryParams = {
  filter: { category: 'books', status: 'available' },
  sort: 'price',
  order: 'asc'
};
axios.get('https://api.example.com/search', {
  params: queryParams // Axios 会自动将 params 对象序列化为查询字符串
})
.then(response => {
  console.log('搜索结果:', response.data);
})
.catch(error => {
  console.error('搜索失败:', error);
});

这会生成类似这样的 URL：https://api.example.com/search?filter[category]=books&filter[status]=available&sort=price&order=asc

高级配置与最佳实践

自动转换：如前所述，当 data 是一个对象且 Content-Type 是 application/json 时，Axios 默认会使用 JSON.stringify() 将其转换为 JSON 字符串，你通常不需要手动 JSON.stringify()。
响应处理：服务器返回的 JSON 数据，Axios 会自动解析为 JavaScript 对象，你可以直接通过 response.data 访问。
错误处理：务必使用 .catch() 或 try...catch (配合 async/await) 来处理请求中可能发生的错误，包括网络错误、服务器错误（4xx, 5xx）等。

拦截器（Interceptors）：对于需要统一设置请求头（如认证 Token）或统一处理响应/错误的场景，可以使用 Axios 拦截器。

// 请求拦截器
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    // 处理未授权，例如跳转到登录页
    window.location.href = '/login';
  }
  return Promise.reject(error);
});

配置默认值：可以设置 Axios 的默认配置,避免重复代码。

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer your_token';
axios.defaults.headers.post['Content-Type'] = 'application/json';

使用 async/await：对于更清晰的异步代码，可以使用 async/await 语法。

async function createUser(userData) {
  try {
    const response = await axios.post('/users', userData, {
      headers: { 'Content-Type': 'application/json' }
    });
    console.log('用户创建成功:', response.data);
    return response.data;
  } catch (error) {
    console.error('创建用户失败:', error);
    throw error; // 可以选择重新抛出错误或处理
  }
}
createUser({ username: 'jane_doe', email: 'jane@example.com' });

使用 Axios 发送 JSON 数据是前端开发中的基本技能,关键在于：

将 JSON 数据作为 JavaScript 对象赋值给请求的 data 属性。
显式设置 headers 中的 'Content-Type': 'application/json'。
妥善处理响应和错误。
善用 Axios 的拦截器、默认配置等高级特性来优化代码。

这些技巧，你就能轻松地在项目中实现前后端 JSON 数据的高效交互,希望本文能为你提供清晰的指导和实用的参考。

欧意下载欧意钱包欧意app 欧意欧意欧意

正文

axios如何发送json

准备工作：安装与引入 Axios

发送 JSON 数据的核心：`data` 与 `headers`

常用请求方法发送 JSON 数据

POST 请求发送 JSON 数据

PUT/PATCH 请求发送 JSON 数据

GET 请求发送 JSON 数据（查询参数）

高级配置与最佳实践

相关阅读

如何读取json中的数组

json文件怎么下载内容到电脑

怎么把txt转化成json

form怎么提交json

发表评论取消回复

还没有评论，来说两句吧...

目录[+]

准备工作：安装与引入 Axios

发送 JSON 数据的核心：data 与 headers

常用请求方法发送 JSON 数据

POST 请求发送 JSON 数据

PUT/PATCH 请求发送 JSON 数据

GET 请求发送 JSON 数据（查询参数）

高级配置与最佳实践

相关阅读

如何读取json中的数组

json文件怎么下载内容到电脑

怎么把txt转化成json

form怎么提交json

发表评论取消回复

还没有评论，来说两句吧...

目录[+]

发送 JSON 数据的核心：`data` 与 `headers`