关于http请求ContentType的一些理解

一、application/json

axios默认的content-type是‘application/json；charset=UTF-8’

默认情况下，axios将JavaScript对象序列化为JSON

axios中文文档

get请求，参数会以URL String的形式进行传递。即?后的字符串为请求参数，多个以&作为分隔符。见控制台network的Query String Parameters

post请求，参数在请求体里，见控制台network的Request Payload(http request payload body) 

当然也可以【Query String Parameters】与【Request Payload】同时传递且互不影响

axios({
      method: 'post',
      url: '/api/ap?id=5',
      data: {"id":"最新AP2","mac":"2c 16 bd 42 00 2d","apId":18},
      // params: {id: 5} // 以问号形式拼接在URL后面，或者通过params属性传递
    })

可以发现url上的参数id和payload里的参数id互不影响，都可以传递。 

浏览器原生的form表单提交，是以‘application/x-www-form-urlencoded’方式传递数据

请求参数是以字符串的格式（类似get请求的QueryString格式）放在Form Data中，

如果参数是对象，需要使用qs转换，或者使用new FormData

QS中文文档

【区分】： JSON.stringfy()  和 qs.stringfy() 
  let  data = { name: 'edward', age: '25' }
  前者：JSON.stringfy(data)  //  ”{ 'name' : 'edward' , 'age' : '25' }”
  后者：qs.stringfy(data)  // 'name=edward&age=25'

XMLHttpRequest Level 2添加了一个新的接口FormData。

利用FormData对象，我们可以通过js用一些键值对来模拟一系列表单控件，

使用XMLHttpRequest的send方法来异步的提交这个"表单"，或者使用第三方库，比如fetch、axios

var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); 
axios({
  method: 'POST',
  url:'/users'
  data: formData 
})

 

使用Input上传文件，或者直接将文件流通过xhr提交后台接口

一般不用额外设置请求头的Content-Type，浏览器会自动识别流文件

参数请求格式：Content-Type: multipart/form-data;boundary=${boundary}


${boundary}是浏览器随机生成的字符串，用来分割参数，作用等同于 &

注意点：

• 传统的HTTP请求时候，Content-Type默认为"文本"类型（text/plain）
• 传统的form提交的时候，Content-Type默认为"Form"类型（application/x-www-form-urlencoded)
• axios传递字符串的时候，Content-Type默认为"Form"类型（application/x-www-form-urlencoded)
• axios传递FormData格式数据时，Content-Type默认为"Form"类型（multipart/form-data; boundary=${boundary})
• axios传递对象的时候，Content-Type默认为"JSON"类型（application/json)

扩展，使用xhr传递流文件到后台服务

  var dataUrl = '流地址'
  var fileName = new Date().getTime() + '_' + Math.random() + '.jpg';// 以时间戳作为文件名
  var file = new File([dataUrl], fileName, { type: 'image/jpg' }); 
  var formData = new FormData();
  formData.append('file', file);

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) { // 接口响应完成
            if (xhr.status === 200) {
                  // 成功
                }
            } else {
                // 失败
            }
        }
    }

    xhr.open('POST', '/api/pictures/upload', true);
   // 注意请求头的Content-Type不用设置
   xhr.send(formData);