axios请求header中content-type设置和URLSearchParams参数

最近看了看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"); // truesearchParams1.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