【React】axios get post请求问题

react axios ajax, get post 请求参数问题

axios get

1
2
3
4
5
6
7
8
9
10
11
import axios from 'axios'

axios
.get('https://www.difashi.com',
{
params: { key: 1 },
headers: { 'cookie': 'k=v' }
}
).then((response) => {
// get response
})

axios get方式简单明了

axios post

按常规写法post

1
2
3
4
5
6
7
8
9
10
11
import axios from 'axios'

axios
.post('https://www.difashi.com',
{
name: 'bill',
age: '12'
},
).then((response) => {
// get response
})

这样就可以了吗? 测试发现发送失败,于是我们继续修改

content-type

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import axios from 'axios'

axios
.post('https://www.difashi.com',
{
name: 'bill',
age: '12'
},
{
headers: { 'content-type': 'application/x-www-form-urlencoded' }
}
).then((response) => {
// get response
})

使用表单格式数据后,接口可以正常发出,但是post body数据有误,变为

表单数据格式

无论怎么变化,我们发现form数据都是这种错乱的,看起来是转为字符串

于是查看axios官方说明,找打一个 transformRequest 的配置,意思是转换 request 数据格式,于是我们查看到axios如下源代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// axios/lib/defaults.js

...
transformRequest: [function transformRequest(data, headers) {
normalizeHeaderName(headers, 'Accept');
normalizeHeaderName(headers, 'Content-Type');
if (utils.isFormData(data) ||
utils.isArrayBuffer(data) ||
utils.isBuffer(data) ||
utils.isStream(data) ||
utils.isFile(data) ||
utils.isBlob(data)
) {
return data;
}
if (utils.isArrayBufferView(data)) {
return data.buffer;
}
if (utils.isURLSearchParams(data)) {
setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
return data.toString();
}
if (utils.isObject(data)) {
setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
return JSON.stringify(data);
}
return data;
}],
...

这段源代码大概说明了数据 data 在发送前会有一个转换过程

由于我们传给post的数据是

1
2
3
4
{
name: 'bill',
age: '12'
}

是一个 Javascript object,根据 transformRequest 的逻辑,数据会被转换 JSON.stringify(data),而且content-type也会被修改,
这是不符合我们预期的,我们目的是让这个函数返回原来的 data

方法一

既然axios提供了 transformRequest 的配置,那我们可以重写一个简单

1
2
3
transformRequest: function(data) {
return data;
}

方法二

我们传给post的数据改为 FormData

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import axios from 'axios'

// 把 plain object 转换为 FormData
const transformFormData = (obj) => {
let formData = new FormData()

for (let k in obj) {
formData.append(k, obj[k])
}

return formData
}

axios
.post('https://www.difashi.com',
transformFormData({
name: 'bill',
age: '12'
}),
{
headers: { 'content-type': 'application/x-www-form-urlencoded' }
}
).then((response) => {
// get response
})

如此,axios post收到的是 FormData,返回的也是原来的 Data

发现问题,分析问题原因,再解决问题
学会阅读源代码,修改第三方库的源代码不是一个好的行为

坚持原创技术分享,谢谢鼓励我继续创作!