Axios之Content-Type

• Content-Type属性不需要手动设置: Axios会根据post请求的data数据类型, 自动设置Content-Type

Axios会自动设置Content-Type

1. 默认值application/json

• 场景: 请求数据data为对象时, 不需要任何处理

axios({
    url:"/loadData",
    method:"post",
    data:{
        name:"tom"
    }
}).then(res => {
    console.log(res)
})

2. application/x-www-form-urlencoded

• 场景: 当请求数据data为字符串或URLSearchParams对象时

1. URLSearchParams API

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios({
    url:"/loadData",
    method:"post",
    data:params
}).then(res =>{
    console.log(res)
})

2. 使用qs库将对象转成查询字符串

import Qs from 'qs';

let data = Qs.stringify({name:"Tom"})

axios({
    url:"/loadData",
    method:"post",
    data:data
}).then(res => {
    console.log(res)
})

3. multipart/form-data

• 场景: 上传文件时, 请求数据data转为FormData类型时

let params = new FormData();
params.append("name", "Tom");
dparamsata.append("age", "18");
axios({
    url:"/loadData",
    method:"post",
    data:params
}).then(res =>{
    console.log(res)
})

如果一定要使用application/x-www-form-urlencoded

• 处理: 统一将data数据格式化为查询字符串
• 缺点: 所有post请求都会使用application/x-www-form-urlencoded, 如果需要Content-Type其他类型时就需要单独处理请求了, 比如上传文件时需要使用multipart/form-data;

let instance = axios.create({
  // 发送前, 修改请求数据, Content-Type会根据修改后的数据自动设置
  transformRequest: [
    function(data, headers) {
      return Qs.stringify(data);
    }
  ]
});

建议:

• 与后端沟通一致, 统一使用application/json类型
• 不影响使用multipart/form-data类型上传文件
• 并且json数据类型对于多层嵌套的数据更友好