Content-type常见类型以及axios的应用

Content-type常见类型以及axios的应用

1、application/x-www-form-urlencoded

浏览器的原生form表单
提交的数据按照 key1=val1&key2=val2 的方式进行编码，key和val都进行了URL转码

POST [http://www.example.com](http://www.example.com) HTTP/1.1 
Content-Type: application/x-[www-form-urlencoded](http://www-form-urlencoded);charset=utf-8 

title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3 

在axios应用：

第一种情况

import Qs from 'qs'   //引入方式   qs是axios自带的不需要再下载
let data = {
    "username": "cc",
    "psd": "123456"
}

axios({
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'post',
    url: '/api/lockServer/search',
    data: Qs.stringify(data)
})

第二种情况

var params = new URLSearchParams();//不是所有的浏览器都支持
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

2、multipart/form-data

常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 form 的 enctype 等于这个值。

<form action="/" method="post" enctype="multipart/form-data">
  <input type="text" name="description" value="some text">
  <input type="file" name="myFile">
  <button type="submit">Submit</button>
</form>

在axios的应用

let params = new FormData()
        params.append('file', this.file)
        params.append('id', localStorage.getItem('userID'))
        params.append('userName', this.name)
        params.append('sex', this.sex)
        params.append('mobile', this.phone)
        params.append('email', this.email)
        params.append('qq', this.qq)
        params.append('weChat', this.WeChat)

        axios.post(URL, params, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
          if (res.data.code === 0) {
            this.$router.go(-1)
          }
        }).catch(error => {
          alert('更新用户数据失败' + error)
        })

3、application/json

是消息主体是序列化后的 JSON 字符串

POST [http://www.example.com](http://www.example.com) HTTP/1.1 
Content-Type: application/json;charset=utf-8

{"title":"test","sub":[1,2,3]}

在axios应用 axios默认请求头-application/json

var readyData={
    id:1234,
    name:user
};
axios.post("/notice",readyData)
     .then((res) => {return res})
     .catch((err) => {return err})

axios全局配置

axios.defaults.timeout = 15000;  //超时响应
axios.defaults.withCredentials = true;   // axios 默认不发送cookie，需要全局设置true发送cookie