在JavaScript中分离HTTP响应头与体；从PHP+AngularJS回调提取变量

嘿，针对你提出的两个问题，我来给你详细解答下：

1. 如何在JavaScript中实现HTTP响应头与响应体的分离？ #

这得看你是在浏览器环境还是Node.js环境里操作，两种场景的处理方式略有不同：

浏览器端（Fetch API） #

现在更推荐用Fetch API来发起请求，它的响应对象直接分离了头和体，处理起来很直观：

fetch('https://example.com/api')
  .then(response => {
    // 提取响应头并转为对象
    const headers = {};
    for (const [key, value] of response.headers.entries()) {
      headers[key] = value;
    }
    // 提取响应体（这里假设返回的是JSON格式，根据实际情况用text()/blob()等）
    return response.json().then(body => ({ headers, body }));
  })
  .then(({ headers, body }) => {
    console.log('响应头:', headers);
    console.log('响应体:', body);
  })
  .catch(err => console.error('请求出错:', err));

浏览器端（XMLHttpRequest） #

如果需要兼容老浏览器，用XMLHttpRequest也能实现，只是需要手动解析响应头：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api');
xhr.onload = function() {
  // 获取所有响应头字符串，解析为对象
  const headersStr = xhr.getAllResponseHeaders();
  const headers = headersStr.split('\r\n').reduce((acc, line) => {
    const [key, value] = line.split(': ');
    if (key) acc[key] = value;
    return acc;
  }, {});
  // 提取并解析响应体
  const body = JSON.parse(xhr.responseText);
  
  console.log('响应头:', headers);
  console.log('响应体:', body);
};
xhr.send();

Node.js端 #

在Node.js里用内置的http/https模块处理时，响应对象自带headers属性，响应体需要通过监听事件收集：

const http = require('http');
http.get('http://example.com/api', (response) => {
  // 直接获取响应头对象
  const headers = response.headers;
  // 拼接响应体数据
  let body = '';
  response.on('data', chunk => {
    body += chunk;
  });
  response.on('end', () => {
    // 解析为JSON格式（根据实际响应类型调整）
    body = JSON.parse(body);
    console.log('响应头:', headers);
    console.log('响应体:', body);
  });
}).on('error', err => console.error('请求出错:', err));

2. AngularJS + Cloudant 从完整HTTP响应字符串提取变量 #

你遇到的情况是回调返回了整个HTTP响应的原始字符串，这时候我们需要手动拆分这个字符串，把状态行、响应头和响应体分开，再提取需要的内容。

HTTP响应的结构是：状态行（第一行）→ 多行响应头 → 空行 → 响应体，我们可以根据这个规则来解析：

// 定义一个解析函数，传入原始响应字符串
function parseCloudantResponse(responseStr) {
  // 处理不同系统的换行符（\n 或 \r\n）
  const lines = responseStr.split(/\r?\n/);
  const headers = {};
  let body = '';
  let isBodySection = false;

  lines.forEach((line, index) => {
    const trimmedLine = line.trim();
    if (index === 0) {
      // 解析第一行的状态行，提取状态码和状态文本
      const statusParts = trimmedLine.split(' ');
      headers.statusCode = statusParts[1];
      headers.statusText = statusParts.slice(2).join(' ');
      return;
    }
    if (!trimmedLine) {
      // 遇到空行，之后的内容都是响应体
      isBodySection = true;
      return;
    }
    if (isBodySection) {
      // 拼接响应体内容
      body += line;
    } else {
      // 解析响应头的key-value对
      const [key, ...valueParts] = trimmedLine.split(':');
      headers[key] = valueParts.join(':').trim();
    }
  });

  // 把响应体解析为JSON（Cloudant返回的是JSON格式）
  try {
    body = JSON.parse(body);
  } catch (err) {
    console.error('响应体解析失败:', err);
  }

  // 直接提取你需要的变量，比如修订号rev、文档Location等
  const requiredData = {
    rev: body.rev,
    documentLocation: headers.Location,
    allHeaders: headers,
    fullBody: body
  };

  return requiredData;
}

// 在AngularJS的回调里使用这个函数
// 假设回调拿到的响应字符串是responseStr
const extractedData = parseCloudantResponse(responseStr);
console.log('提取的修订号:', extractedData.rev);
console.log('文档地址:', extractedData.documentLocation);

这个函数会帮你把原始字符串拆成结构化的响应头和响应体，之后你就能轻松获取rev、Location这些需要的变量了。

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