请求失败时如何在请求监听器中获取并记录原始提交数据

好问题！我完全理解你不想依赖全局变量，而是希望用更优雅的面向对象方式来处理——这绝对是值得推崇的实践。

首先得明确：默认情况下，XMLHttpRequest的监听器里是拿不到原始提交的FormData的，因为XHR对象本身不会自动存储你发送的请求体内容。但我们可以通过主动绑定数据的方式解决，完全不用全局变量。

方案1：用闭包快速封装（无需类，但避免全局） #

如果你不想马上写类，闭包是个简单又优雅的方案——把FormData放在外层函数的作用域里，监听器就能直接访问它：

function sendFormRequest(formData) {
  const xhr = new XMLHttpRequest();
  
  // 监听器可以直接访问外层函数的formData变量
  xhr.addEventListener("load", function reqListener() {
    const data = this.responseText;
    const jsonResponse = JSON.parse(data);
    
    if (!jsonResponse.ok) {
      // 直接拿到原始提交的FormData！
      console.log("原始提交数据：", formData);
      // 可选：转成普通对象方便查看
      const formattedData = Object.fromEntries(formData.entries());
      console.log("格式化后的原始数据：", formattedData);
    }
  });
  
  xhr.open("POST", "/your-api-endpoint");
  xhr.send(formData);
}

// 使用方式
const myFormData = new FormData(document.getElementById("your-form-id"));
sendFormRequest(myFormData);

方案2：完整的面向对象封装（完全符合你的需求） #

如果要严格遵循面向对象思路，我们可以把请求逻辑封装成一个类，把FormData作为实例的属性存储，这样响应处理函数就能轻松访问到：

class FormRequestHandler {
  constructor(formData) {
    // 把原始提交数据存在实例属性中
    this.formData = formData;
    this.xhr = new XMLHttpRequest();
    this._setupEventListeners();
  }

  // 私有方法：设置监听器（用下划线标识私有约定）
  _setupEventListeners() {
    // 必须bind(this)，不然监听器里的this会指向XHR对象，而不是类实例
    this.xhr.addEventListener("load", this._handleResponse.bind(this));
  }

  // 响应处理逻辑
  _handleResponse() {
    const data = this.xhr.responseText;
    const jsonResponse = JSON.parse(data);
    
    if (!jsonResponse.ok) {
      // 直接访问实例的formData属性
      console.log("原始提交数据：", this.formData);
      const formattedData = Object.fromEntries(this.formData.entries());
      console.log("格式化后的原始数据：", formattedData);
    }
  }

  // 发送请求的公共方法
  send(url) {
    this.xhr.open("POST", url);
    this.xhr.send(this.formData);
  }
}

// 使用方式
const myFormData = new FormData(document.getElementById("your-form-id"));
const requestHandler = new FormRequestHandler(myFormData);
requestHandler.send("/your-api-endpoint");

额外：现代Fetch API的面向对象写法 #

如果你的项目可以用更现代的Fetch API，同样可以封装成类，代码更简洁：

class FetchFormRequestHandler {
  constructor(formData) {
    this.formData = formData;
  }

  async send(url) {
    const response = await fetch(url, {
      method: "POST",
      body: this.formData
    });
    
    const jsonResponse = await response.json();
    if (!jsonResponse.ok) {
      console.log("原始提交数据：", this.formData);
    }
  }
}

// 使用方式
const myFormData = new FormData(document.getElementById("your-form-id"));
const fetchRequest = new FetchFormRequestHandler(myFormData);
fetchRequest.send("/your-api-endpoint");

不管哪种方案，核心都是把原始提交数据和请求实例绑定在一起，既避免了全局变量的污染，又完美符合面向对象的设计思路。

内容的提问来源于stack exchange，提问作者singmotor