最近看了看axios的源码，对于其使用有了进一步了解，特别是配置header的 content-type这个地方，其根据post的data的类型来配置header的 content-type

1. 首先配置默认的
2. 然后根据请求的时候所传data数据类型，重置content-type
3. 特别注意的是data为Form Data类型，由浏览器自己设定content-type，如果你自定义了，那么代码中会删除；同时，请求的时候，不要对formdata做处理

所以在日常使用的过程中一般不用设置默认的content-type

1. POST 提交数据方式

1. axios默认添加了对请求方法'post', 'put', 'patch'添加了默认请求头'Content-Type': 'application/x-www-form-urlencoded'，但是如果传参data是json对象，那么请求头就会更改为Content-Type':application/json;charset=utf-8
2. 如果传参data不是json对象，这个时候我们就可以按照下面的方法，也就是transformRequest对请求数据改造，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val都进行了URL转码。大部分服务端语言都对这种方式有很好的支持，同时我们可以不设置请求头，使用默认即可

1.1 application/x-www-form-urlencoded

Content-Type: application/x-www-form-urlencoded是最常见的 POST 提交数据的方式了，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val都进行了URL转码。大部分服务端语言都对这种方式有很好的支持。

qs方式

import qs from 'qs'

axios.defaults.headers.common['test2'] = 123
console.log(qs.stringify({
    a: 1,
    b: 2,
    c: 3
})) // a=1&b=2&c=3
axios({
    url: '/config/post',
    method: 'post',
    data: qs.stringify({
        a: 1
    }),
    headers: {
        test: '321'
    }
}).then((res) => {
    console.log(res.data)
})

这里使用qs模块：序列化和反序列化字符串

transformRequest：请求前处理数据，不用设置请求头，默认配置了

//POST
export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      //在向服务器发送前，修改请求数据
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }]
    // headers: {
    //   'Content-Type': 'application/x-www-form-urlencoded'
    // }
  });
}

1.2 application/json（推荐）

application/json:Content-Type 告诉服务端消息主体是序列化后的JSON字符串

1.3 URLSearchParams

URLSearchParams
URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串

var paramsString = "q=URLUtils.searchParams&topic=api"
var searchParams = new URLSearchParams(paramsString);

for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

URLSearchParams 构造函数不会解析完整 URL，但是如果字符串起始位置有 ? 的话会被去除。

var paramsString1 = "http://example.com/search?query=%40";
var searchParams1 = new URLSearchParams(paramsString1);

searchParams1.has("query"); // false 
searchParams1.has("http://example.com/search?query"); // true

searchParams1.get("query"); // null
searchParams1.get("http://example.com/search?query"); // "@" (equivalent to decodeURIComponent('%40'))

var paramsString2 = "?query=value";
var searchParams2 = new URLSearchParams(paramsString2);
searchParams2.has("query"); // true 

var url = new URL("http://example.com/search?query=%40");
var searchParams3 = new URLSearchParams(url.search);
searchParams3.has("query") // true