fetch 请求json 转 param

fetch post 请求的时候
header可以有两种选择： ‘Content-Type’: ‘application/json’, 和 ‘Content-Type’: ‘application/x-www-form-urlencoded’,

当使用application/json 的时候，body直接是 JSON.stringify(paramObject) 比较简单
但当使用 ‘Content-Type’: ‘application/x-www-form-urlencoded’,时候，需要将对象转换为url 参数格式的字符串

例如 ：

var paramObject  = {a:1,b:2}

转化为：

a=1&b=2

这种格式。在有jquery的时代，可以直接使用$.param({a:1,b:2}) 拿到需要的结果
但是目前很多react项目已经不依赖jquery了,可以通过如下代码自行拼装这个字符串

var  paramObject  = {a:1,b:2}
 var queryString = Object.keys(paramObject).map((key) => {
    return encodeURIComponent(key) + '=' + encodeURIComponent(payload[key])
  }).join('&');

最终fetch代码

 async function query(payload) {

  var queryString = Object.keys(payload).map((key) => {
    return encodeURIComponent(key) + '=' + encodeURIComponent(payload[key])
  }).join('&');


  var response = await  fetch("/queryurl", {
    method: "POST",
    mode: 'cors',//跨域
    credentials: 'include',//带凭证
    headers: {
       // 使用form 表单的形式
       'Content-Type': 'application/x-www-form-urlencoded',
       //  'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
    },
    body: queryString
    // body: JSON.stringify(payload) //当使用application/json 的时候的对应body
  })
  // 异步拿到fetch 的返回值字符串
  var text = await response.text();
    //jsonparse 后返回对象
  return JSON.parse(text)


}

参考文档
https://blog.csdn.net/u010700335/article/details/72902640 post表单类型区分
https://howchoo.com/g/nwywodhkndm/how-to-turn-an-object-into-query-string-parameters-in-javascript#using-map-and-join json 转 param