一、简介
axios
默认是Payload
格式数据请求,但有时候后端接收参数要求必须是Form Data
格式的,所以我们就得进行转换。Payload
和Form Data
的主要设置是根据请求头的Content-Type
的值来的:
Payload
:Content-Type: 'application/json; charset=utf-8'
Form Data
:Content-Type: 'application/x-www-form-urlencoded'
Content-Type: 'multipart/form-data'
- 上面三种
Content-Type
值介绍
application/json
和application/x-www-form-urlencoded
都是表单数据发送时的编码类型。form
的enctype
属性为编码方式,常用有两种:application/x-www-form-urlencoded
和multipart/form-data
,默认为application/x-www-form-urlencoded
。- 当
action
为get
时候,浏览器用x-www-form-urlencoded
的编码方式把form
数据转换成一个字串(name1=value1&name2=value2...)
,然后把这个字串append
到url
后面,用?
分割,加载这个新的url
。 - 当
action
为post
时候,浏览器把form
数据封装到http body
中,然后发送到server
。 - 如果没有
type=file
的控件,用默认的application/x-www-form-urlencoded
就可以了。 - 但是如果有
type=file
的话,就要用到multipart/form-data
了。浏览器会把整个表单以控件为单位分割,并为每个部分加上Content-Disposition(form-data或者file)
、Content-Type(默认为text/plain)
、name(控件name)
等信息,并加上分割符(boundary)
。
二、发送 formdata 请求(下面有这几种方式格式化参的数据样本,用于参考比较,看需求选择方式)
- 方式一,自己封装一个格式化函数:
import axios from 'axios'
################################### 请求方式一,全局使用
// 创建 axios 实例
const service = axios.create({
baseURL: '',
timeout: 20000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
// 将请求数据转换成功 formdata 接收格式
service.defaults.transformRequest = (data) => {
return stringify(data)
}
################################### 请求方式二,局部使用
axios({
method: 'post',
url: 'http://localhost:8080/dzm',
data: {
username: 'dzm',
password: 'dzm123456'
},
transformRequest: [
function (data) {
// 将请求数据转换成功 formdata 接收格式
return stringify(data)
}
],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
################################### 转换方法封装
// 将参数转换成功 formdata 接收格式
function stringify (data) {
const formData = new FormData()
for (const key in data) {
// eslint-disable-next-line no-prototype-builtins
if (data.hasOwnProperty(key)) {
if (data[key]) {
if (data[key].constructor === Array) {
if (data[key][0]) {
if (data[key][0].constructor === Object) {
formData.append(key, JSON.stringify(data[key]))
} else {
data[key].forEach((item, index) => {
formData.append(key + `[${index}]`, item)
})
}
} else {
formData.append(key + '[]', '')
}
} else if (data[key].constructor === Object) {
formData.append(key, JSON.stringify(data[key]))
} else {
formData.append(key, data[key])
}
} else {
if (data[key] === 0) {
formData.append(key, 0)
} else {
formData.append(key, '')
}
}
}
}
return formData
}
- 方式二,使用
qs
组件,但是qs
格式化会过滤空数组数据:
import axios from 'axios'
// qs 模块是安装 axios 模块的时候就有的,不用另行安装,通过 import 引入即可使用
import qs from 'qs'
################################### 请求方式一,全局使用
// 创建 axios 实例
const service = axios.create({
baseURL: '',
timeout: 20000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
// 将请求数据转换成功 formdata 接收格式,这一段选方式一那种拦截转换也可以。
service.interceptors.request.use(config => {
const token = Vue.ls.get(ACCESS_TOKEN)
if (token) {
// 让每个请求携带自定义 token 请根据实际情况自行修改
config.headers['X-Token'] = token
}
// 将请求数据转换成功 formdata 接收格式
config.data = qs.stringify(config.data)
return config
}, err)
################################### 请求方式二,局部使用
axios({
method: 'post',
url: 'http://localhost:8080/dzm',
data: {
username: 'dzm',
password: 'dzm123456'
},
transformRequest: [
function (data) {
// 将请求数据转换成功 formdata 接收格式
return qs.stringify(data)
}
],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
- 方式三,数组会被转换成字符串(这种不是特殊情况一般不会使用上)
import axios from 'axios'
################################### 请求方式跟上面一样
axios({
method: 'post',
url: 'http://localhost:8080/dzm',
data: {
username: 'dzm',
password: 'dzm123456'
},
transformRequest: [
function (data) {
// 将请求数据转换成功 formdata 接收格式
return stringify(data)
}
],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
################################### 转换方法封装
// 将参数转换成功 formdata 接收格式
function stringify (data) {
let ret = ''
for (const it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
ret = ret.substring(0, ret.lastIndexOf('&'))
return ret
}
三、上面方式,参数格式化之后:
- 方式一 格式化出来的数据:
// 数组无值
id: 2086
intention:
follower_id[]:
concat_material[]:
// 数组有值
id: 2086
intention:
follower_id[0]: 351
follower_id[1]: 66
// 数组 json 为空会被转成正常的数组,有值会被转成字符串,所以服务器需要注意处理
concat_material: [{"fname":"视频订单.xls","key":"local/other/099f4be38fb8e69bb031cbc36ed283a6.xls"}]
- 方式二 格式化出来的数据:
// 数组无值
id: 2086
intention:
// 数组有值
id: 2086
intention:
follower_id[0]: 351
follower_id[1]: 66
concat_material[0][fname]: 视频订单.xls
concat_material[0][key]: local/other/099f4be38fb8e69bb031cbc36ed283a6.xls
concat_material[1][fname]: 视频订单1.xls
concat_material[1][key]: local/other/099f4be38fb8e69bb031cbc36ed283a8.xls
- 方式三 格式化出来的数据:
// 数组无值
id: 743
intention: 2
follower_id:
concat_material:
// 数组有值
id: 2086
intention:
follower_id: 66,351
concat_material: [object Object],[object Object]