Fetch API与POST请求参数格式那些事

在前端与后端进行接口联调时，有时会遇到明明已经传递了参数，后端却未接收到的情况，尤其是针对POST请求。本文将通过使用Node.js作为服务端语言，结合Express框架，来分析前端发送POST请求的四种方式以及后端如何接收这些数据。我们将不借助第三方库如jQuery或axios，而是使用现代JavaScript的原生特性——Fetch API，以简洁灵活的语法来实现这一过程。在深入探讨POST请求之前，先对Fetch API做一个简要概述。

Fetch API提供了获取资源的接口，包括跨域请求，其功能强大且灵活，有望成为XMLHttpRequest的替代方案。在GitHub重构代码时，就以Fetch API替代了jQuery的ajax方法，反映了JavaScript原生语法的精简趋势。未来，Fetch API很可能成为主流。

接下来，我们通过简单的实例来探索Fetch API的主要接口和方法。

Fetch API包含了三个接口和一个方法，为前端与后端的数据交互提供了基础框架。其中一个有趣的特性是，它支持客户端手动取消HTTP请求，这是之前许多AJAX库不支持的功能。通过AbortSignal接口，客户端可以创建AbortController实例，使用其signal作为请求配置项传递给服务端。当客户端需要中止请求时，只需调用AbortController实例的abort方法即可。

对于POST请求的参数传递，本文将不采用通常AJAX库中对数据的二次封装，而是探讨原始数据格式的交互。接下来，我们分别分析JSON提交、请求头提交、普通表单提交以及通过FormData进行的文件上传。

JSON提交是一种常用的数据交换格式，前端传递的数据以对象形式出现，请求头Content-Type设置为application/json;charset=utf-8，表明使用UTF-8字符集。这种方式清晰且高效，适用于数据量较小的场景。

然而，在实际开发中，有时后端开发者会将参数放入请求头中，与GET请求中的参数相似，这种做法存在浏览器URL长度限制的问题。通常，浏览器URL的最大长度约为7700个字符，对于POST请求而言，将参数放入请求体更为合理。

表单提交提供了两种方式，一种是传统的HTML表单，另一种则是通过FormData对象进行提交，尤其适用于文件上传场景。与之前讨论的几种参数传递方式相比，表单提交在逻辑上有所区别，主要体现在数据结构上。

在文件上传过程中，参数通常以字节流的形式通过body传递给服务端，而非直接作为键值对。这种方式对于后端处理文件上传请求尤为重要。

总结，POST请求的参数通常放置于请求体中，尽管有将参数放入请求头中的情况，但这通常与GET请求中的参数处理方式保持一致。从Node.js接收参数时，除了通过请求头获取外，其余三种请求方式的数据都以字节流的形式到达服务端。理解POST请求的多种参数传递方式，将有助于前端与后端开发人员在接口联调过程中更顺畅地沟通与协作。

本文如未解决您的问题请添加抖音号：51dongshi（抖音搜索懂视），直接咨询即可。