axios传参的两种方式，及常见的content-type四种格式

axios传参格式有两种 fromdata （表单数据） 格式和json字符串格式 （Request Payload）

1.fromdata格式

axios默认方式是Request Payload 格式， 如果请求数据时后台用的是 application/x-www-form-urlencoded ，我们需要转成fromdata形式
1.import QS from ‘qs’
2.axios.defaults.headers[‘Content-Type’] = ‘application/x-www-form-urlencoded;charset=UTF-8’;
3. 响应拦截时data转换
axios.interceptors.request.use(
config => {
xxxxxxxx
…
if (config.method === ‘post’ && config.url != ‘https://up-z0.qiniup.com’)
config.data = QS.stringify(config.data);
return config;
},
error => {
return Promise.error(error);
})
2.json格式

1.axios.defaults.headers[‘Content-Type’] = ‘application/json’;
2.参数需要序列化一下 json.stringfy(data) 否则传到后台是 [object,object]格式

常见content-type四种形式

1.application/x-www-form-urlencoded

表单格式提交数据，通过form标签的action属性，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据

var xhr = new XMLHttpRequest();
xhr.open("post","请求文件");
var data="userName=li&passWard=111111"
xhr.setRequestHeader("content-type","application/x-www-from-urlencoded");
xhr.send(data);
xhr.onreadystatechange=function(){
  if(xhr.readyState===4){
    if(xhr.status==200){
      console.log(xhr.responseText)
    }else{
      alert(发生错误+"xhr.status")
    }
  }
}

特点：Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 会进行URL 转码。

2.application/json
application/json 这个 Content-Type 作为响应头大家肯定不陌生。用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

JSON 格式支持比键值对复杂的多的结构化数据，这一点也很有用。

var xhr = new XMLHttpRequest();
xhr.open("post","请求文件");
var data={
"userName"="li",
"passWard"="111111"
}
data=JSON.stringify(data);
xhr.setRequestHeader("content-type","application/json");
xhr.send(data);
xhr.onreadystatechange=function(){
  if(xhr.readyState===4){
    if(xhr.status==200){
      console.log(xhr.responseText)
    }else{
      alert(发生错误+"xhr.status")
    }
  }
}

特点Content-Type 被指定为 application/json；其次，提交的数据需要序列化。

3.multipart/form-data（文件上传）
我们使用表单上传文件时，就要让 form 的 enctype 等于这个值。
首先生成了一个 boundary 用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。然后 Content-Type 里指明了数据是以 mutipart/form-data 来编码。

let formData = new FormData(上传对象);

  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        console.log(xhr.responseText);
      } else {
        alert("Response was unsuccessful:" + xhr.status);
      }
    }
  };

  xhr.open("post", "上传文件", true);
     xhr.setRequestHeader("Content-Type","multipart/form-data");
  xhr.send(formData);

特点在formdata对象中
4.text/xml
相比于JSON，XML不能更好的适用于数据交换，它包含了太多的包装, 而且它跟大多数编程语言的数据模型不匹配，XML是面向数据的，JSON是面向对象和结构的

var xhr = new XMLHttpRequest();

  xhr.onreadystatechange=function(){
      if(xhr.readyState==4){
          if(xhr.status==200){
              var xmlObj=xhr.responseXML;
              //后台返回<res><mes>success</mes><user>patty</user></res>
              var res=xmlObj.getElementsByTagName("res")[0];  
              var mes=res.childNodes[0].childNodes[0].nodeValue;
              var user=res.childNodes[1].childNodes[0].nodeValue;
              console.log(mes+"  用户："+user);
          }
      }
  };
  xhr.open("post", "test.php", true);

  var name=xxx;
  var pwd=xxx;
  var xml="<user><name>"+name+"</name><pwd>"+pwd+"</pwd></user>";
  xhr.setRequestHeader("Content-Type", "text/xml");
  xhr.send(xml);