axios中http请求Content-Type以及post需要用qs.stringify而get请求时不用

axios中post请求 application/json和 application/x-www-form-urlencoded

前端向后端传输数据时，如果是get传输，直接传在url后；如果是post传输，则在请求体body中传输。
在body中的数据格式又有两种，一种是 json 数据格式，另一种是 字符串。具体要用哪种格式取决于后端入参的格式

如果后端接收json数据类型，post 的 headers 需要设置 { ‘content-type’: ’application/json’ }，传给后端的数据就形如 { ‘name’:’edward’, ‘age’:’25’ }
如果后端接收的是（表单）字符串类型，post 的 headers 需设置 { ‘content-type’: ’application/x-www-form-urlencoded’ }，传输给后端的数据就形如 ‘name=edward&age=25’

qs.stringfy() 将对象序列化成URL的形式

axios默认数据格式为json,所以：
1.当后端需要接收json格式的数据时,post请求头不需要设置请求头，数据格式也不需要我们去转换(若数据已经是json)；
2.当后端需要接收字符串格式的数据时，我们需要给post请求头设置{ ‘content-type’: ’application/x-www-form-urlencoded’ }，
这个时候如果我们传的入参是一个 js 对象，这时候我们就需要用 qs 转换数据格式

import qs from 'qs';
const data = { name:'edward' , age:'25'};  // 我们传的是 js 对象
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),   // 用 qs 将js对象转换为字符串 'name=edward&age=25'
  url: 'http://www.edward.com'
};
axios(options);
 
--ajax
$.ajax({
   type: 'POST',
   contentType: 'application/json;charset=utf-8', // 发送的数据类型
   dataType: 'json',   // 接收的数据类型
   url: 'http://www.edward.com',
   data: JSON.stringfy(formData),
   success: function (res) {
      console.log(res.data)
   }
})　
contentType: 告诉服务器，我要发什么类型的数据
dataType：告诉服务器，我要想什么类型的数据，如果没有指定，那么会自动推断是返回 XML，还是JSON，还是script，还是String。
注意 ：$.ajax() post发送到服务器的数据。将自动转换为请求字符串格式。
如果为对象，如 { name: 'edward', age: '25' }，jQuery 将自动转化为 'name=edward&age=25'
如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

Content-Type设置

使用不同请求方式时，参数的传输方式是不一样的，但是服务端在取接口的请求参数时，用的方法其实却是一样的，都是使用request.getParameter(key)来获取，其实是因为tomcat在中间会对请求参数进行解析处理，处理完把解析出来的表单参数放在request parameter map中，所以后端就可以通过request.getParameter(key)来统一获取数据，而tomcat解析的时候是通过’contentType’来知道当前的请求是post请求，当’contentType’为"application/x-www-form-urlencoded",它才会去读取请求体数据。
为何要用Qs.stringify()将对象序列化成URL的形式：
post请求参数是以键值对的形式存在请求体里，用Qs.stringify()就是把传入的对象转换为键值对。
可以在封装axios的时候，给它全局设置qs

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

1.Content-Type: application/json

application/json 它声明了请求体中的数据将会以json字符串的形式发送到后端，那么可以直接接收json。

2、 Content-Type: application/x-www-form-urlencoded
Content-Type:application/x-www-form-urlencoded，声明了请求体中的数据会以键值对（普通表单形式 {key:value} ）发送到后端，这种类型是Ajax默认的。当后端需要我要传键值对给他们的时候，就需要在头部设置
headers: { ‘Content-Type’:‘application/x-www-form-urlencoded’}
然后，将请求体中的数据设置为键值对 （但是求体中的数据一般是JSON对象，这个时候，就可以使用qs库将对象转为url参数形式，也就是将json序列化qs.stringify()。

3.Content-Type: multipart/form-data
Content-Type:multipart/form-data，则一般用来上传文件，指定传输数据为二进制数据，例如图片、mp3、文件，也可以用来上传键值对。简单写法如下：

<input type="file" />
 
let data = new FormData();
data.append('userfile', document.querySelector('input[type=file]').files[0]);
data.append('username', 'admin');
data.append('password', '123456');
 
axios({
    url: '/XXXX/XXXX',
    method: 'post',
    headers: {
        'Content-Type': 'multipart/form-data'
    },
    data: data
})

用post时，用data传参不在地址中显示参数，用params传参在地址中显示参数
用get时，用data传参无法传参数，必须用params传参。

request payload和form data的区别
一、FormData和Payload是浏览器传输给接口的两种格式，这两种方式浏览器是通过Content-Type来进行区分的。

如果是application/x-www-form-urlencoded的话，则为formdata方式；

如果是applocation/json或multipart/form-data的话，则为request payload方式。

二、使用ajax方式提交post请求的代码（默认使用application/x-www-form-urlencoded编码）：

则为formdata请求：

三、使用multipart/form-data表单上传文件

则为request payload方式：

四、使用content-type:application/json编码：

则为request payload方式：