【前端网络请求】XHR封装，支持文件上传、进度监控、混合字段传输

本文链接：https://blog.csdn.net/qq_41590018/article/details/147177987

网络请求介绍

XMLHttpRequest（XHR）是前端开发中用于发起网络请求的基础技术。虽然现代开发中常用fetch或axios，但掌握XHR的封装技巧仍能让你更灵活地应对复杂需求。本文将通过一个可复用、功能全面的XHR封装工具，教你实现以下功能：

📤 文件上传（单个/多个文件）
📊 实时上传进度监控
🛠️ 混合数据传输（文件+普通JSON字段）
🚨 完善的错误处理（超时、网络错误、解析异常）

一、工具功能亮点

灵活调用：支持两种传参方式（对象配置或独立参数）。
自动数据转换：根据场景自动使用FormData或JSON。
进度反馈：实时计算上传百分比。
兼容性强：适配普通请求和文件上传场景。

二、完整代码实现

// createXHRRequest.js

// 定义常量
const CONTENT_TYPE_JSON = 'application/json';
const DEFAULT_TIMEOUT = 30000; 
const ACCEPT_JSON = 'application/json'; 

// 参数校验
function validateOptions(options) {
   
  if (!options.method) throw new Error('缺少method参数');
  if (!options.url) throw new Error('缺少url参数');
  if (options.method === 'POST' && options.data === undefined) {
   
    throw new Error('POST请求需要data参数');
  }
}

// 初始化XHR对象
function initXHR(xhr, options) {
   
  xhr.timeout = options.timeout || DEFAULT_TIMEOUT;
  xhr.open(options.method, options.url, true);
  if (!options.isFileUpload) {
   
    xhr.setRequestHeader('Content-Type', CONTENT_TYPE_JSON);
  }
  xhr.setRequestHeader('Accept', ACCEPT_JSON);
}

// 数据格式化（JSON或FormData）
function prepareRequestData(options) {
   
  if (!options.isFileUpload) return JSON.stringify(options.data);

  const formData = new FormData()