本文聚焦于 JavaScript 获取 POST 请求返回数据的完整方法：浏览器端、Node.js 与 Axios/Fetch 等框架逐一解析，涵盖从浏览器原生 Fetch、XMLHttpRequest 到 Node.js 端的请求实现，以及 Axios、Fetch 等常用框架的返回数据处理方式。通过示例代码与要点梳理，帮助前端与后端开发者在不同场景下高效获取 POST 请求的返回数据。
1. 浏览器端解析：POST 请求返回数据的完整方法
在浏览器端，最常用的方法是 Fetch API，关键点之一是正确设置请求头、序列化请求体，并对返回的状态码进行判断，以确保后续的数据解析步骤准确无误。
// 浏览器端：使用 Fetch 发起 POST 请求并获取返回数据
const payload = { name: 'Alice', age: 30 };fetch('/api/submit', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(payload)
})
.then(response => {if (!response.ok) {throw new Error('网络响应非 2xx');}// 根据 Content-Type 动态解析const contentType = response.headers.get('content-type') || '';if (contentType.includes('application/json')) {return response.json();} else if (contentType.includes('text')) {return response.text();} else {return response.blob();}
})
.then(data => {// 获取的返回数据 data 可能是对象、文本或 Blob，视响应类型而定console.log('返回数据：', data);
})
.catch(err => {console.error('请求失败：', err);
});
要点2：处理返回数据的不同类型，返回的数据可能是 JSON、文本或二进制（Blob/ArrayBuffer），因此应结合 Content-Type 做初步判断并选择合适的解析方法。
在需要支持异步语法的场景，可以将上面的代码改写为 async/await 的版本，以提升可读性和错误处理能力。
// 浏览器端：async/await 版本
async function postData(url, payload) {const res = await fetch(url, {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(payload)});if (!res.ok) {throw new Error(`HTTP 错误：${res.status}`);}const contentType = res.headers.get('content-type') || '';if (contentType.includes('application/json')) {return await res.json();} else if (contentType.includes('text')) {return await res.text();} else {return await res.blob();}
}// 调用示例
postData('/api/submit', { name: 'Bob' }).then(data => console.log('返回数据：', data)).catch(err => console.error(err));
此外，错误处理与网络状态检查是在浏览器端获取 POST 返回数据时不可省略的环节。通常会结合 try/catch、response.ok、以及网络异常的捕获来确保稳定性。
2. Node.js 环境中的 POST 请求返回数据获取完整方法
在 Node.js 端发起 POST 请求并获取返回数据时，内置的 http/https 模块提供了最基本的能力，需手动拼接返回数据，适用于对依赖最小化和高灵活性的场景。
// Node.js：使用内置 https 模块发起 POST 请求
const https = require('https');const data = JSON.stringify({ username: 'alice', action: 'submit' });const options = {hostname: 'api.example.com',port: 443,path: '/data',method: 'POST',headers: {'Content-Type': 'application/json','Content-Length': Buffer.byteLength(data)}
};const req = https.request(options, (res) => {let raw = '';res.setEncoding('utf8');res.on('data', (chunk) => { raw += chunk; });res.on('end', () => {try {const parsed = JSON.parse(raw);console.log('返回数据：', parsed);} catch (e) {console.error('解析返回数据失败：', e.message);}});
});req.on('error', (e) => {console.error(`请求遇到错误: ${e.message}`);
});req.write(data);
req.end();
要点2：使用常用库提升开发效率，如 axios、node-fetch 等，可以显著简化请求和返回数据的处理逻辑，减少手动数据拼接与解析的工作量。
// 使用 axios 在 Node.js 中发起 POST 请求
const axios = require('axios');axios.post('https://api.example.com/data', { username: 'alice', action: 'submit' }).then(response => {// response.data 即“返回数据”console.log('返回数据：', response.data);}).catch(error => {console.error('请求失败：', error.message);});
// 使用 node-fetch 在 Node.js 中发起 POST 请求
const fetch = require('node-fetch');fetch('https://api.example.com/data', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ username: 'alice', action: 'submit' })
})
.then(res => res.json())
.then(data => console.log('返回数据：', data))
.catch(err => console.error('请求失败：', err));
要点3：跨环境的一致性处理，在服务端与客户端都需要对返回数据进行统一的结构约束，例如总是返回一个 { code, message, data } 的包装对象，以便调用方统一解析。
3. Axios 与 Fetch 框架逐一解析
3.1 Axios：浏览器端的 POST 请求返回数据处理
在浏览器端，Axios 的返回对象中 data 字段承载了服务器返回数据，使用 .then(({ data }) => ...) 可以直接获取数据，错误处理则通过 catch 捕获。
下面给出一个浏览器端的示例，演示如何通过 Axios 发起 POST 请求并获取 data：
// 浏览器端：使用 Axios 获取返回数据
// Note: 需要通过