前端怎么发送json请求

前端开发指南：如何发送JSON请求**

在现代Web应用开发中，前后端数据交互是核心环节，JSON（JavaScript Object Notation）因其轻量级、易读、易于解析的特点，已成为前后端数据交换的主流格式，前端开发者需要熟练如何发送JSON请求，以与后端API进行高效通信,本文将详细介绍在前端发送JSON请求的几种常用方法及最佳实践。

发送JSON请求的核心要素

在开始编码之前,我们需要明确发送JSON请求时通常需要关注的几个核心要素：

1. URL（统一资源定位符）：请求的目标地址。
2. HTTP方法（Method）：常见的有GET（获取数据）、POST（提交数据，常用于创建资源）、PUT（更新资源）、DELETE（删除资源）等，发送JSON数据通常使用POST、PUT或PATCH方法。
3. 请求头（Headers）：用于传递额外的信息给服务器，发送JSON请求时，最重要的请求头是 Content-Type，它告诉服务器请求体的格式是JSON，通常设置为 application/json。Accept 头可以告诉服务器客户端期望接收的响应格式，也常设置为 application/json。
4. 请求体（Body/Payload）：即要发送的JSON数据，在JavaScript中，这通常是一个对象或数组,在发送前会被序列化为JSON字符串。
5. 异步处理：前端发送请求通常是异步的，以避免阻塞页面渲染，我们需要处理请求的成功（响应）和失败（错误）情况。

使用XMLHttpRequest (XHR) 发送JSON请求

XMLHttpRequest 是较早期浏览器提供的API，用于在后台与服务器交换数据，虽然现在有更现代的替代方案,但了解它有助于理解HTTP请求的本质。

示例代码：

// 1. 创建XHR对象
const xhr = new XMLHttpRequest();
// 2. 配置请求：方法、URL、是否异步
xhr.open('POST', 'https://api.example.com/data', true);
// 3. 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Accept', 'application/json');
// 4. 定义请求完成后的回调函数
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功
    const response = JSON.parse(xhr.responseText);
    console.log('请求成功:', response);
  } else {
    // 请求失败
    console.error('请求失败:', xhr.statusText);
  }
};
// 5. 定义错误处理回调函数
xhr.onerror = function() {
  console.error('网络错误或请求未发送成功');
};
// 6. 准备并发送请求体（JSON数据）
const requestData = {
  name: '张三',
  age: 30,
  email: 'zhangsan@example.com'
};
// 将JavaScript对象序列化为JSON字符串
const jsonData = JSON.stringify(requestData);
// 发送请求
xhr.send(jsonData);

特点：

• 兼容性好,支持所有现代浏览器和旧版浏览器。
• API相对底层，需要手动处理很多细节，如设置请求头、解析响应、处理错误等。
• 代码量稍多,不够简洁。

使用Fetch API 发送JSON请求

Fetch API 是现代浏览器提供的新一代网络请求API，它基于Promise，提供了更强大、更灵活的功能，语法也更简洁优雅,是目前推荐的主流方式。

示例代码（POST请求）：

// 请求URL
const url = 'https://api.example.com/data';
// 要发送的JSON数据
const requestData = {
  name: '李四',
  age: 25,
  email: 'lisi@example.com'
};
// 请求配置
const options = {
  method: 'POST', // HTTP方法
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
    // 可以添加其他请求头，如Authorization
    // 'Authorization': 'Bearer your_token_here'
  },
  body: JSON.stringify(requestData) // 将JavaScript对象转换为JSON字符串
};
// 发送fetch请求
fetch(url, options)
  .then(response => {
    // 检查响应状态码，如果状态码不在200-299范围内，则抛出错误
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    // 解析响应体为JSON
    return response.json();
  })
  .then(data => {
    // 处理成功获取的数据
    console.log('请求成功:', data);
  })
  .catch(error => {
    // 处理请求或解析过程中的错误
    console.error('请求失败:', error);
  });

GET请求发送JSON参数（通常作为查询字符串）：

const url = new URL('https://api.example.com/data');
url.searchParams.append('filter', JSON.stringify({ status: 'active', category: 'tech' }));
fetch(url)
  .then(response => response.json())
  .then(data => console.log('GET请求成功:', data))
  .catch(error => console.error('GET请求失败:', error));

特点：

• 基于Promise，语法更简洁,避免了回调地狱。
• 提供了更丰富的功能，如请求和响应的流处理、更灵活的头部操作等。
• 默认不发送跨域Cookie，需要设置 credentials: 'include'（如果需要）。
• 对错误的处理与XHR不同，只有网络错误或请求未完成才会触发 catch，HTTP状态码错误（如404, 500）需要在 then 中手动检查。

使用第三方库（如Axios）发送JSON请求

虽然Fetch API已经非常优秀，但第三方库如 Axios 凭借其易用性、丰富的功能和良好的兼容性，仍然被广泛使用，Axios是一个基于Promise的HTTP客户端，适用于浏览器和Node.js。

需要安装Axios：

npm install axios
# 或
yarn add axios
# 或在HTML中引入CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

示例代码：

import axios from 'axios'; // 如果使用模块化开发
// 请求URL
const url = 'https://api.example.com/data';
// 要发送的JSON数据
const requestData = {
  name: '王五',
  age: 28,
  email: 'wangwu@example.com'
};
// 发送POST请求
axios.post(url, requestData, {
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
    // 'Authorization': 'Bearer your_token_here'
  }
})
.then(response => {
  // Axios会直接将响应数据解析为JSON
  console.log('请求成功:', response.data);
})
.catch(error => {
  // Axios会自动处理网络错误和HTTP错误状态码
  if (error.response) {
    // 服务器返回了响应，但状态码不在2xx范围内
    console.error('请求失败，状态码:', error.response.status);
    console.error('响应数据:', error.response.data);
  } else if (error.request) {
    // 请求已发出，但没有收到响应
    console.error('没有收到响应:', error.request);
  } else {
    // 请求设置时发生错误
    console.error('请求错误:', error.message);
  }
});
// GET请求示例（自动将params对象转换为查询字符串）
axios.get('https://api.example.com/data', {
  params: {
    filter: { status: 'active', category: 'tech' },
    page: 1
  },
  headers: {
    'Accept': 'application/json'
  }
})
.then(response => console.log('GET请求成功:', response.data))
.catch(error => console.error('GET请求失败:', error));

特点：

• 基于Promise,语法简洁。
• 自动将请求对象序列化为JSON字符串（当Content-Type为application/json时）。
• 自动将响应体解析为JSON。
• 提供了请求/响应拦截器,可以在请求发送前或响应接收后进行统一处理。
• 更好的错误处理，能区分网络错误、响应错误和请求配置错误。
• 支持取消请求、超时设置、下载进度等功能。
• 兼容性良好，支持浏览器和Node.js。

最佳实践与注意事项

1. 错误处理：无论使用哪种方式，都要妥善处理请求过程中可能出现的错误，包括网络错误、服务器错误（5xx）、客户端错误（4xx）等。
2. 安全性：
   • CSRF防护：确保你的应用有适当的CSRF防护机制,特别是在涉及敏感操作时。
   • 敏感信息：不要在URL或请求体中直接发送敏感信息（如密码）,使用HTTPS协议。
   • 输入验证：对用户输入进行验证和清理,防止XSS等攻击。
3. Content-Type与Accept头：始终正确设置 Content-Type 为 application/json 以表明发送的是JSON数据，并根据需要设置 `Accept