封装XMLHttpRequest的POST请求函数无法返回响应及优化问询

一、为什么return无法返回响应对象？ #

XMLHttpRequest是异步操作，你的xhr函数在调用xhr.send(json)后会立即执行完毕并返回，此时onreadystatechange回调还没触发（请求仍在后台处理）。你在回调里写的return obj只是回调函数自身的返回值，根本不会被外部的xhr函数捕获，所以外部拿到的是undefined。

你改用回调函数的方式是正确的，这是处理异步操作的经典方案之一。

二、当前函数的优化空间 #

现有方案解决了基础问题，但还有不少可以优化的地方，让函数更健壮、易用：

1. 修复请求头设置错误 #

原代码里用了xhr.getResponseHeader("Content-type", "application/json")，这是获取响应头的方法，设置请求头应该用xhr.setRequestHeader。而且发送JSON格式的POST请求时，必须设置这个请求头，否则后端可能无法正确解析JSON数据：

// 替换原错误的getResponseHeader
if (xhrObject.type.toUpperCase() === 'POST') {
  xhr.setRequestHeader("Content-Type", "application/json");
}

2. 完善错误处理逻辑 #

当前只处理了请求成功（readyState=4且status=200）的情况，完全没考虑以下场景：

• HTTP错误（比如404、500状态码）
• 网络请求失败（比如断网）
• 请求超时

可以扩展回调函数，传入错误信息，或者拆分出成功、失败两个回调：

// 优化后的回调版本，支持错误处理
function xhr(xhrObject, successCallback, errorCallback) {
  let xhr = new XMLHttpRequest();
  const method = xhrObject.type?.toUpperCase() || 'GET';
  let url = xhrObject.destination;
  
  // 设置默认响应类型
  xhr.responseType = xhrObject.response || 'text';
  
  // 处理GET请求参数拼接
  if (method === 'GET' && xhrObject.data) {
    const params = new URLSearchParams(xhrObject.data).toString();
    url += `?${params}`;
  }

  xhr.open(method, url, true);

  // 设置POST请求头
  if (method === 'POST' && xhrObject.data) {
    xhr.setRequestHeader("Content-Type", "application/json");
  }

  xhr.onreadystatechange = function () {
    if(this.readyState === 4) {
      if(this.status === 200) {
        successCallback(xhr.response);
      } else {
        // 处理HTTP错误
        errorCallback(new Error(`请求失败，状态码：${this.status}`));
      }
    }
  };

  // 处理网络错误
  xhr.onerror = function() {
    errorCallback(new Error("网络请求失败"));
  };

  // 设置超时（可选，默认10秒）
  xhr.timeout = xhrObject.timeout || 10000;
  xhr.ontimeout = function() {
    errorCallback(new Error("请求超时"));
  };

  // 准备发送的数据
  const sendData = method === 'POST' && xhrObject.data ? JSON.stringify(xhrObject.data) : null;
  xhr.send(sendData);
}

// 调用示例
xhr(object, 
  function(result) { alert(result.Name); },
  function(error) { console.error(error.message); }
);

3. 支持Promise/Async-Await #

现代JavaScript更推荐用Promise封装异步操作，避免回调地狱，还能使用async/await语法让代码更接近同步逻辑：

function xhr(xhrObject) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    const method = xhrObject.type?.toUpperCase() || 'GET';
    let url = xhrObject.destination;
    
    // 处理GET参数
    if (method === 'GET' && xhrObject.data) {
      const params = new URLSearchParams(xhrObject.data).toString();
      url += `?${params}`;
    }

    xhr.open(method, url, true);
    xhr.responseType = xhrObject.response || 'text';

    if (method === 'POST' && xhrObject.data) {
      xhr.setRequestHeader("Content-Type", "application/json");
    }

    xhr.onreadystatechange = function () {
      if(this.readyState === 4) {
        if(this.status === 200) {
          resolve(xhr.response);
        } else {
          reject(new Error(`请求失败，状态码：${this.status}`));
        }
      }
    };

    xhr.onerror = () => reject(new Error("网络请求失败"));
    xhr.timeout = xhrObject.timeout || 10000;
    xhr.ontimeout = () => reject(new Error("请求超时"));

    const sendData = method === 'POST' && xhrObject.data ? JSON.stringify(xhrObject.data) : null;
    xhr.send(sendData);
  });
}

// 调用示例（async/await）
async function fetchData() {
  try {
    const result = await xhr(object);
    alert(result.Name);
  } catch (error) {
    console.error(error.message);
  }
}
fetchData();

4. 其他优化点 #

• 参数校验：检查xhrObject.destination是否必填，response类型是否为合法值（text/json/blob等），避免非法参数导致的错误。
• 取消请求支持：返回一个包含abort方法的对象，允许外部主动取消请求：

  function xhr(xhrObject) {
    const xhr = new XMLHttpRequest();
    // ...其他代码...
    return {
      promise: new Promise((resolve, reject) => { /* ... */ }),
      abort: () => xhr.abort()
    };
  }
  

• 默认参数：给xhrObject设置默认值，比如默认请求方法为GET，默认响应类型为text，减少调用时的参数输入。

总结 #

你的初始方案解决了异步返回的核心问题，但通过上述优化，可以让函数更健壮、易用，适配更多场景。如果项目对兼容性要求不高（支持ES6+），推荐使用Promise版本，代码更简洁易维护。

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