Fetch API POST 请求参数
Fetch API 提供了一个获取资源的接口(包括跨域请求)，提供了更强大和灵活的功能集。未来可能是 XMLHttpRequest 的一种替代方案。去年GitHub代码去jQuery重构时，就使用Fetch API替代jQuery的ajax，毕竟目前JavaScript很多原生语法都进行了大量精简，比如DOM操作API、http请求fetch、es6+等。今天的axios可能就是明日的jQuery！
简单的实例
Fetch API 主要暴露了三个接口一个方法。
- 三个接口
Request（资源请求）Response（请求的响应）Headers（Request/Response头部信息）
- 一个方法
fetch()（获取资源调用的方法）
POST请求四种传参方式
本文所说的前端传递数据格式相对于主流的ajax函数库有一定区别，一般的ajax函数库为了方便用户使用，都会对数据进行二次封装。本文主要说原始的数据格式交互，具体ajax库的使用，还是以官方文档为准。
请求头(Request Headers)的实体Content-Type用于指示资源的MIME类型，即客户端传递消息的格式；响应头中Content-Type用于指示服务端返回消息的格式。所以在http请求中，我们可以从报文中的Content-Type属性来判断客户端-服务端消息传递的格式。
JSON提交
JSON是常用的一种前后端数据接收格式。前端传递的是键值对数据，即对象(Object)。采用JSON传递参数，请求头Content-Type为application/json;charset=utf-8，其中charset为采用的字符集。
注意点:
-
既然为JSON提交，就要对参数进行序列化，即
JSON.stringify(params)，否则传递到服务端的参数可能是[Object object] -
服务端(
node.js)是以流的方式进行接收，接收完是一个JSON字符串，调用JSON.parse(params)可以对参数进行序列化
示例代码：
客户端：
const url = 'http://192.168.43.216:3000'
let testRequest = new Request(url + '/test', {
method: 'post',
headers: {
'Content-Type': 'application/json;charset=utf-8;'
},
body: JSON.stringify({a: 1})
})
fetch(testRequest).then(response => {
let result = response.text()
result.then(res => {
console.log(res)
})
})
服务端:
router.post('/test', (req, res, next) => {
let data = ''
req.on('data', chunk => {
data += chunk
})
req.on('end', () => {
// 将JSON字符串解析成对象
data = JSON.parse(data)
res.send(data)
})
})
请求头提交
在实际开发中，遇到过不少后端开发，喜欢吧请求参数放在请求头，类似于get请求，即请求的参数是拼接在请求地址后面。个人觉得这种传参方式并不好，一般浏览器对URL长度是有限制的，以Chrome为例，URL最大长度正在7700个字符左右，对于post请求来说，最好参数还是放在body中。
注意点
- 客户端请求参数拼接在
url后，在?后，键值对写法a=1，多个键值对之间通过连接符&连接 - 服务端能够在
request对象中，通过request.query直接进行接收 - 由于参数是拼接在
url后面，所以请求头Content-Type无需设置
示例代码
客户端：
let queryStringRequest = new Request(`${url}/querystring?a=1&b=2`, {
method: 'post'
})
fetch(queryStringRequest).then(response => {
let result = response.json()
result.then(res => {
console.log(res)
})
})
服务端:
router.post('/querystring', (req, res, next) => {
res.send(req.query)
})
普通表单提交
表单提交的方式有两种，一种是普通的表单提交，另外一种是通过FormData进行提交（主要应用在文件上传）。单纯的表单提交，与上述两种参数格式上还是存在一定的差别的，主要体现在以下几个方面。
Content-Type
表单提交Request Headers的Content-Type为application/x-www-form-urlencoded;charset=utf-8。
- 参数
表单提交参数是放在body中，感觉是JSON和请求头提交的合体。参数位置与JSON提交相同，参数格式与请求头提交一致
示例代码
客户端：
let formRequest = new Request(url + '/form', {
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
},
body: 'a=1&b=2'
})
fetch(formRequest).then(response => {
let result = response.json()
result.then(res => {
console.log(res)
})
})
服务端:
const fs = require('fs')
router.post('/form', (req, res, next) => {
let data = ''
req.on('data', chunk => {
data += chunk
})
req.on('end', () => {
data = decodeURI(data)
// 将a=1&b=2解析成{a: 1, b: 2}
let dataObj = querystring.parse(data)
res.send(dataObj)
})
})
请求信息：
FormData提交 (文件上传)
通常我们在进行文件上传时，都会采用表单提交。参数放在body中,只不过格式与普通的有差别，具体如下：
- 参数需要放在
FormData的实例中，通过append进行参数的添加 - 请求头
Content-Type为multipart/formdata
示例代码
客户端：
<template>
<input type="file" id="uploadFile">
</template>
<script>
let $input = document.getElementById('uploadFile')
// 监听文件上传
$input.addEventListener('change', e => {
let file = e.target.files[0]
handleUploadFile(file)
})
function handleUploadFile (file) {
let bean = new FormData()
bean.append('file', file)
bean.append('hello', 'world')
let uploadFileRequest = new Request(`${url}/upload`, {
method: 'post',
headers: {
'Content-Type': 'multipart/formdata'
},
body: bean
})
fetch(uploadFileRequest).then(response => {
let result = response.text()
result.then(res => {
console.log(res)
})
})
}
</script>
服务端:
router.post('/upload', (req, res, next) => {
let data = []
let size = 0
req.on('data', chunk => {
data.push(chunk)
size += chunk.length
})
let rems = []
req.on('end', () => {
let buffer = Buffer.concat(data, size)
for (let i = 0; i < buffer.length; i++) {
var v = buffer[i];
var v2 = buffer[i+1];
if(v==13 && v2==10){
rems.push(i);
}
}
// 图片信息
var picmsg_1 = buffer.slice(rems[0]+2,rems[1]).toString();
var filename = picmsg_1.match(/filename=".*"/g)[0].split('"')[1];
// 图片数据
var nbuf = buffer.slice(rems[3]+2,rems[rems.length-2]);
var path = './static/'+filename;
fs.writeFileSync(path , nbuf);
res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8'});
res.end('<div id="path">'+path+'</div>');
})
})
小结
post请求向服务端提交参数，一般情况下都是放在body中，但是从上文列举的几种传参方式，仍然可以放在请求头中传递，服务端对于在请求头中传递的参数的处理和get请求保持一致。此外，从node.js接收的参数来看，除了放在请求头中能够直接获取外，其余三种请求方式都是以字节流的方式传递到服务端的。熟悉post请求的几种传参方式，有助于我们和后端同学进行接口联调。
