如何获取XHR响应状态码及使用XMLHttpRequest从WS获取响应

一、如何获取响应状态码？ #

你提到的xhr.response.statusCode其实是个小误区哦——XMLHttpRequest对象本身就有一个status属性，用来直接获取HTTP响应状态码（比如200表示成功，404表示资源不存在，500表示服务器错误等），而不是从response对象里取。

举个例子，在请求完成的回调里你可以这样获取：

XHR.onload = function() {
  console.log('响应状态码:', this.status); // 这里就能拿到状态码
  if (this.status >= 200 && this.status < 300) {
    // 请求成功的逻辑
  } else {
    // 请求失败的逻辑
  }
};

response属性一般用来获取响应体的内容，比如responseText（文本格式）或者responseJSON（JSON格式，需要提前设置responseType: 'json'）。

二、完整的XMLHttpRequest调用Web Service示例 #

结合你给出的代码片段，咱们把完整的请求流程补全，包括事件监听、错误处理和发送请求的步骤：

private prepareSave(): void {
  const endpoint = Api.getUrl(Api.URLS.createContrat);
  const XHR = new XMLHttpRequest();
  const input: FormData = new FormData();
  
  // 填充FormData（你的代码可以继续补充完整字段）
  input.append('contratedate', this.addContratForm.get('contratedate').value);
  input.append('contratdesc', this.addContratForm.get('contratdesc').value);
  input.append('unit_price', this.addContratForm.get('unit_price').value);
  // 其他字段...

  // 监听请求完成事件
  XHR.onload = function() {
    // 先判断状态码是否在成功范围内
    if (this.status >= 200 && this.status < 300) {
      // 请求成功，处理响应内容
      console.log('保存成功！响应内容:', this.responseText);
      // 如果响应是JSON格式，可以解析一下
      // const responseData = JSON.parse(this.responseText);
    } else {
      // 请求失败，根据状态码处理错误
      console.error(`保存失败，状态码：${this.status}，响应信息：${this.responseText}`);
    }
  };

  // 监听网络错误事件（比如断网、跨域问题等）
  XHR.onerror = function() {
    console.error('请求发生网络错误，请检查网络连接或接口地址');
  };

  // 监听请求进度（可选）
  XHR.onprogress = function(event) {
    if (event.lengthComputable) {
      const percentComplete = (event.loaded / event.total) * 100;
      console.log(`上传进度：${percentComplete.toFixed(2)}%`);
    }
  };

  // 初始化请求：请求方法（POST）、接口地址、是否异步（默认true）
  XHR.open('POST', endpoint);
  
  // 注意：如果是发送FormData，浏览器会自动设置正确的Content-Type为multipart/form-data，不需要手动设置
  // 除非Web Service有特殊要求，比如需要设置Authorization头，可以在这里添加：
  // XHR.setRequestHeader('Authorization', 'Bearer ' + yourToken);

  // 发送请求，把FormData传进去
  XHR.send(input);
}

几个实用注意点： #

• 如果你的Web Service返回JSON格式，建议在open之后加上XHR.responseType = 'json';，这样XHR.response会自动解析成JSON对象，不用手动JSON.parse。
• 跨域问题：如果你的前端页面和Web Service不在同一个域名下，需要后端配置CORS（跨域资源共享），否则请求会被浏览器拦截。
• 异步vs同步：XMLHttpRequest默认是异步的，不建议设置同步（open的第三个参数设为false），因为会阻塞主线程，影响页面交互。

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