FetchAPI和POST请求参数格式，那些事

FetchAPI和POST请求的四种参数格式简介。相信很多前端开发童鞋和后端联调接口都会遇到前端传过来的参数，但是后台童鞋说没有收到，尤其是postrequests，遇到了很多。本文使用node.js作为服务端语言，借用express框架，简单分析客户端发送post请求的四种方式以及服务端如何接收。本文客户端请求不依赖第三方ajax库，而是使用FetchAPI。虽然浏览器兼容性有点问题，但是使用简单灵活，可能会成为未来的趋势。在谈论post请求之前，让我们简要概述一下FetchAPI。FetchAPIFetchAPI提供获取资源（包括跨域请求）的接口，提供更强大和灵活的特性集。将来可能会有XMLHttpRequest的替代方案。去年GitHub代码重构为jQuery时，使用的是FetchAPI而不是jQuery的ajax。毕竟很多原生的JavaScript语法已经大大简化了，比如DOM操作API、http请求fetch、es6+等，今天的axios可能就是明天的jQuery！FetchAPI简单示例主要暴露了三个接口和一个方法。三个接口Request(资源请求)Response(对请求的响应)Headers(Request/Response头信息)a方法fetch()(获取资源调用的方法)//实例化一个Request实例//第一个参数一般指Resource路径//第二个参数可以理解为请求的配置项，包括header信息和http请求的一些关键配置（请求类型，参数...）letrequestInstance=newRequest('/hello',{method:'post',headers:{'Content-Type':'application/json;charset=utf-8'},body:'{"hello":"world"}'})//fetch方法参数同Request实例//第一个参数是url或者Request实例//第二个参数是请求配置项fetch(requestInstance).then(response=>{//返回的是一个Response实例//调用Response实例的序列化方法,sequence转化为json,返回值为promise//序列化方法包括json,text,formData,blob,arrayBuffer,redirctletresult=response.json()result.then(res=>{consolee.log(res)})})一个有趣的特性FetchAPI新增了一个实验性的功能，支持客户端手动取消http请求。这个比较有意思，因为之前的ajax好像不支持手动取消。借助AbortSignal接口，可以通过AbortController实例化一个controller，并将实例的signal作为request的配置项传递给server。客户端可以通过AbortController实例的abort方法终止当前的http请求。示例代码如下：post请求传参的四种方法本文提到的前端传数据格式与主流的ajax函数库相比，有一定的区别。为了方便用户，一般的ajax函数库都会对数据进行重新封装。这篇文章主要讲原始数据格式的交互。ajax库的具体使用还是以官方文档为准。请求头（RequestHeaders）的实体Content-Type，用于指示资源的MIME类型，即客户端传递的消息的格式；响应头中的Content-Type用于表示服务器返回消息的格式。所以在http请求中，我们可以从消息中的Content-Type属性来判断client-server消息的格式。JSON提交JSON是一种常用的前后端数据接收格式。前端传递键值对数据，即Object。使用JSON传递参数，请求头的Content-Type为application/json;charset=utf-8，其中charset为使用的字符集。注意：由于是以JSON形式提交的，所以需要对参数进行序列化，即JSON.stringify(params)，否则传递给服务器的参数可能是[Objectobject]服务器（node.js）接收到的一个stream，收到后是一个JSON字符串，调用JSON.parse(params)将参数序列化示例代码客户端：consturl='http://192.168.43.216:3000'lettestRequest=newRequest(url+'/test',{method:'post',headers:{'Content-Type':'application/json;charset=utf-8;'},body:JSON.stringify({a:1})})fetch(testRequest).then(response=>{letresult=response.text()result.then(res=>{console.log(res)})})服务器：router.post('/test',(req,res,next)=>{letdata=''req.on('data',chunk=>{data+=chunk})req.on('end',()=>{//解析JSON字符串Objectdata=JSON.parse(data)res.send(data)})})请求信息：请求头提交在实际开发中，我遇到过很多后端开发，喜欢将请求参数放在请求头中，类似于Forget请求，即请求的参数拼接在请求地址之后。个人觉得这种传递参数的方式不好。通常，浏览器对URL的长度有限制。以Chrome为例，URL的最大长度约为7700个字符。对于post请求，最好将参数放在body中。请注意，客户端请求参数连接在url之后。?后，键值对写成a=1，多个键值对通过连接器&连接，连接服务器到请求对象，直接通过request.query接收，因为参数是拼接的在url之后，不需要设置请求头的Content-Type示例代码客户端：letqueryStringRequest=newRequest(`${url}/querystring?a=1&b=2`,{method:'post'})fetch(queryStringRequest).then(response=>{letresult=response.json()result.then(res=>{console.log(res)})})服务器：router.post('/querystring',(req,res,next)=>{res.send(req.query)})请求信息：普通表单提交表单提交有两种方式，一种是普通表单提交，另一种是通过FormData提交(主要用于文件上传）。简单表单提交与上述两种参数格式有一些区别，主要体现在以下几个方面。Content-Type表单提交的RequestHeaders的Content-Type为application/x-www-form-urlencoded;charset=utf-8。parameter表单提交参数放在body中，感觉是json和requestheader提交的结合。参数位置与JSON提交一致，参数格式与请求头提交一致。示例代码客户端：letformRequest=newRequest(url+'/form',{method:'post',headers:{'Content-Type':'application/x-www-form-urlencoded;charset=utf-8;'},body:'a=1&b=2'})fetch(formRequest).then(response=>{letresult=response.json()result.then(res=>{console.log(res)})})server:constfs=require('fs')router.post('/form',(req,res,next)=>{letdata=''req.on('data',chunk=>{data+=chunk})req.on('end',()=>{data=decodeURI(data)//将a=1&b=2解析为{a:1,b:2}letdataObj=querystring.parse(data)res.send(dataObj)})})请求信息：FormData提交（文件上传）通常我们上传文件的时候，都是使用表单提交。参数放在body中，但是格式和普通的不一样，如下：参数需要放在FormData的实例中，通过append添加参数RequestheaderContent-Typeismultipart/formdata示例代码客户端：server:router.post('/upload',(req,res,next)=>{letdata=[]letsize=0req.on('data',chunk=>{data.push(chunk)size+=chunk.length})letrems=[]req.on('end',()=>{letbuffer=Buffer.concat(data,size)for(leti=0;i'+path+'