JavaScript 请求体

请求体是什么？

在进行网络通信时，我们经常需要向服务器发送数据。请求体(Request Body) 就是在HTTP请求中携带的数据部分，它包含了我们想要发送给服务器的信息。请求体通常用于POST、PUT和PATCH等HTTP方法中，这些方法通常用于创建或更新服务器上的资源。

备注

GET请求通常不包含请求体，因为它主要用于从服务器获取数据，而不是向服务器发送数据。

常见的请求体格式

在JavaScript网络请求中，常见的请求体格式有：

1. JSON (JavaScript Object Notation)：最常用的数据交换格式
2. FormData：用于发送表单数据
3. URL编码：将数据编码为键值对
4. 纯文本：简单的文本数据
5. 二进制数据：如文件上传

使用 fetch API 发送不同格式的请求体

JSON 请求体

JSON是最常用的数据格式，特别适合传输结构化数据：

javascript

// 创建要发送的数据对象
const userData = {
  username: "john_doe",
  email: "john@example.com",
  age: 28
};

// 发送POST请求
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData) // 将JavaScript对象转换为JSON字符串
})
.then(response => response.json())
.then(data => {
  console.log('成功:', data);
})
.catch(error => {
  console.error('错误:', error);
});

提示

使用JSON.stringify()将JavaScript对象转换为JSON字符串是必须的，因为fetch API的body参数不能直接接受JavaScript对象。

FormData 请求体

FormData对象用于模拟HTML表单提交，特别适合包含文件上传的表单：

javascript

// 创建一个FormData对象
const formData = new FormData();

// 添加表单字段
formData.append('username', 'john_doe');
formData.append('email', 'john@example.com');

// 添加文件（假设有一个id为"fileInput"的文件输入元素）
const fileInput = document.getElementById('fileInput');
if (fileInput.files.length > 0) {
  formData.append('profile_image', fileInput.files[0]);
}

// 发送POST请求
fetch('https://api.example.com/submit-form', {
  method: 'POST',
  body: formData // 直接使用FormData对象作为请求体
  // 注意：使用FormData时不要手动设置Content-Type头，浏览器会自动设置
})
.then(response => response.json())
.then(data => {
  console.log('表单提交成功:', data);
})
.catch(error => {
  console.error('表单提交错误:', error);
});

URL编码请求体

URL编码格式常用于简单的表单提交：

javascript

// 准备数据
const data = {
  username: 'john_doe',
  password: 'secret123'
};

// 转换为URL编码格式
const urlEncodedData = new URLSearchParams();
for (const [key, value] of Object.entries(data)) {
  urlEncodedData.append(key, value);
}

// 发送POST请求
fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: urlEncodedData.toString()
})
.then(response => response.json())
.then(data => {
  console.log('登录成功:', data);
})
.catch(error => {
  console.error('登录失败:', error);
});

纯文本请求体

有时候我们只需要发送简单的文本数据：

javascript

const message = "Hello, this is a plain text message.";

fetch('https://api.example.com/messages', {
  method: 'POST',
  headers: {
    'Content-Type': 'text/plain'
  },
  body: message
})
.then(response => response.text())
.then(data => {
  console.log('服务器响应:', data);
})
.catch(error => {
  console.error('错误:', error);
});

二进制数据请求体

发送二进制数据，如文件上传：

javascript

// 假设我们有一个ArrayBuffer或Blob对象
fetch('https://api.example.com/upload-binary', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/octet-stream'
  },
  body: binaryData // 这里的binaryData可以是ArrayBuffer, Blob, File等
})
.then(response => response.json())
.then(data => {
  console.log('上传成功:', data);
})
.catch(error => {
  console.error('上传失败:', error);
});

使用 XMLHttpRequest 发送请求体

虽然现代JavaScript开发主要使用fetch API，但了解XMLHttpRequest也很重要，特别是在需要兼容旧浏览器的情况下：

javascript

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    const response = JSON.parse(xhr.responseText);
    console.log('成功:', response);
  } else {
    console.error('请求失败，状态码:', xhr.status);
  }
};

xhr.onerror = function() {
  console.error('请求失败');
};

const data = {
  name: 'John Doe',
  email: 'john@example.com'
};

xhr.send(JSON.stringify(data));

使用 Axios 库发送请求体

Axios是一个流行的HTTP客户端库，它简化了请求体的处理：

javascript

// 首先需要引入axios库
// <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

// 发送JSON请求体
axios.post('https://api.example.com/users', {
  username: 'john_doe',
  email: 'john@example.com'
})
.then(response => {
  console.log('成功:', response.data);
})
.catch(error => {
  console.error('错误:', error);
});

// 发送FormData
const formData = new FormData();
formData.append('username', 'john_doe');
formData.append('file', fileInput.files[0]);

axios.post('https://api.example.com/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(response => {
  console.log('上传成功:', response.data);
})
.catch(error => {
  console.error('上传失败:', error);
});

实际应用案例

案例1：用户注册系统

javascript

// 获取表单元素
const registerForm = document.getElementById('registerForm');

registerForm.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  
  // 收集表单数据
  const userData = {
    username: document.getElementById('username').value,
    email: document.getElementById('email').value,
    password: document.getElementById('password').value,
    confirmPassword: document.getElementById('confirmPassword').value
  };
  
  // 简单的客户端验证
  if (userData.password !== userData.confirmPassword) {
    alert("密码不匹配!");
    return;
  }
  
  // 发送注册请求
  fetch('https://api.example.com/register', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(userData)
  })
  .then(response => {
    if (!response.ok) {
      // 如果HTTP状态码不是2xx，抛出错误
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    alert("注册成功！");
    window.location.href = '/login'; // 注册成功后跳转到登录页
  })
  .catch(error => {
    console.error('注册失败:', error);
    alert("注册失败，请重试!");
  });
});

案例2：图片上传与预览

javascript

const imageForm = document.getElementById('imageUploadForm');
const imagePreview = document.getElementById('imagePreview');
const fileInput = document.getElementById('imageFile');

// 当选择文件时显示预览
fileInput.addEventListener('change', function() {
  if (this.files && this.files[0]) {
    const reader = new FileReader();
    
    reader.onload = function(e) {
      imagePreview.src = e.target.result;
      imagePreview.style.display = 'block';
    };
    
    reader.readAsDataURL(this.files[0]);
  }
});

// 提交表单时处理上传
imageForm.addEventListener('submit', function(event) {
  event.preventDefault();
  
  const formData = new FormData();
  formData.append('title', document.getElementById('imageTitle').value);
  formData.append('description', document.getElementById('imageDescription').value);
  formData.append('image', fileInput.files[0]);
  
  // 显示上传进度
  const progressBar = document.getElementById('uploadProgress');
  progressBar.style.display = 'block';
  
  const xhr = new XMLHttpRequest();
  
  xhr.upload.addEventListener('progress', function(e) {
    if (e.lengthComputable) {
      const percentComplete = (e.loaded / e.total) * 100;
      progressBar.value = percentComplete;
    }
  });
  
  xhr.open('POST', 'https://api.example.com/upload-image', true);
  
  xhr.onload = function() {
    if (xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      alert(`图片上传成功！URL: ${response.imageUrl}`);
    } else {
      alert('上传失败，请重试。');
    }
  };
  
  xhr.send(formData);
});

常见问题与解决方案

1. CORS错误处理

当向不同源的服务器发送带有请求体的请求时，可能会遇到CORS（跨源资源共享）错误：

javascript

fetch('https://different-domain.com/api', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ data: 'test' }),
  // 添加credentials选项以发送cookies
  credentials: 'include' 
})
.catch(error => {
  console.error('CORS错误:', error);
});

注意

解决CORS问题主要依赖于服务器端配置适当的CORS头，客户端无法绕过这些安全限制。

2. 大文件上传

对于大文件上传，可以考虑切片上传：

javascript

function uploadLargeFile(file, chunkSize = 1024 * 1024) {
  const chunks = Math.ceil(file.size / chunkSize);
  let currentChunk = 0;
  
  function uploadNextChunk() {
    const start = currentChunk * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);
    
    const formData = new FormData();
    formData.append('file', chunk);
    formData.append('totalChunks', chunks);
    formData.append('currentChunk', currentChunk);
    formData.append('filename', file.name);
    
    fetch('https://api.example.com/upload-chunk', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      currentChunk++;
      if (currentChunk < chunks) {
        uploadNextChunk();
      } else {
        console.log('上传完成!');
      }
    })
    .catch(error => console.error('上传错误:', error));
  }
  
  uploadNextChunk();
}

// 使用示例
const fileInput = document.getElementById('largeFileInput');
fileInput.addEventListener('change', function() {
  if (this.files.length > 0) {
    uploadLargeFile(this.files[0]);
  }
});

总结

请求体是HTTP请求中不可或缺的一部分，它允许我们向服务器发送各种格式的数据。在JavaScript中，主要通过以下方式发送请求体：

1. fetch API - 现代浏览器的标准方式
2. XMLHttpRequest - 传统方式，仍然有用
3. 第三方库 - 如Axios，提供更简洁的API

根据数据类型和需求的不同，你可以选择不同的请求体格式：

• JSON - 适合结构化数据
• FormData - 适合表单和文件上传
• URL编码 - 适合简单的键值对
• 文本/二进制 - 适合特殊需求

掌握请求体的使用对于前端开发至关重要，它是与后端系统交互的基础。

练习与扩展学习

1. 基础练习：创建一个简单的联系表单，使用fetch和JSON请求体提交数据。
2. 中级练习：实现一个支持图片预览和上传的功能，使用FormData发送请求。
3. 高级练习：创建一个支持大文件分片上传的功能，包括进度显示和断点续传。

扩展阅读资源

• MDN Web Docs: Using Fetch
• MDN Web Docs: FormData
• MDN Web Docs: XMLHttpRequest
• Axios文档

通过本文的学习和练习，你应该能够熟练地在JavaScript网络请求中使用各种形式的请求体，为构建交互式Web应用打下坚实的基础。