axios + query-string 与 jQuery、POST 数据被 query-string 破坏
axios + query-string vs. jQuery, POST data broken by query-string
我们要通过 ajax
发送的数据示例
const dataExample = {
"userId": '...id',
"supportFormId": 14,
"supportFormName": 'Tickets',
"customFields": [
{
"customFieldId": 80,
"name": 'Subject',
"value": '...',
"dataType": 'Text'
},
// ....
{
"customFieldId": 84,
"name": 'Description',
"value": '...',
"dataType": 'Text'
}
]
}
jQueryajax来电
$.ajax({
type: 'post',
url: 'http://....',
dataType: 'json',
data: dataExample,
success: function (data) { /* ... */ }
});
axios + query-string ajax 调用
import axios from "axios";
import qs from 'query-string'
const dataQs = qs.stringify(dataExample);
return new Promise(
async (resolve, reject) => {
try {
const response = await axios({
method: 'post',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: dataQs,
url: 'http://....'
});
if (response) return resolve(response)
return reject()
} catch (err) { return reject(err) }
}
);
结果
问题
jQuery 从来没有任何类型的问题 但 axios + query-string,尽管不同 headers 喜欢
'content-type': 'application/json',
'content-type': 'multipart/form-data',
and/or
可选的字符串化选项,如
const dataQs = qs.stringify(data, { encode: false })
const dataQs = qs.stringify(data, { arrayFormat: 'indices', commaSuffix: 'bracket' })
const dataQs = qs.stringify(data, { arrayFormat: 'indices' })
const dataQs = qs.stringify(data, { arrayFormat: 'brackets' })
const dataQs = qs.stringify(data, { arrayFormat: 'repeat' })
const dataQs = qs.stringify(data, { arrayFormat: 'comma' })
一直在破坏数据..
哪个是正确的 axios + query-string(或替代)代码以获得与 jQuery?
相同的结果
您可以使用类似下面的内容
const objectToQueryString = (initialObj) => {
const reducer = (obj, parentPrefix = null) => (prev, key) => {
const val = obj[key];
key = encodeURIComponent(key);
const prefix = parentPrefix ? `${parentPrefix}[${key}]` : key;
if (val == null || typeof val === 'function') {
prev.push(`${prefix}=`);
return prev;
}
if (['number', 'boolean', 'string'].includes(typeof val)) {
prev.push(`${prefix}=${encodeURIComponent(val)}`);
return prev;
}
prev.push(Object.keys(val).reduce(reducer(val, prefix), []).join('&'));
return prev;
};
return Object.keys(initialObj).reduce(reducer(initialObj), []).join('&');
};
objectToQueryString({
name: 'John Doe',
age: 20,
children: [
{ name: 'Foo Doe' },
{ name: 'Bar Doe' }
],
wife: {
name: 'Jane Doe'
}
});
// -> name=John%20Doe&age=20&children[0][name]=Foo%20Doe&children[1][name]=Bar%20Doe&wife[name]=Jane%20Doe
摘自以下要点
我们要通过 ajax
发送的数据示例const dataExample = {
"userId": '...id',
"supportFormId": 14,
"supportFormName": 'Tickets',
"customFields": [
{
"customFieldId": 80,
"name": 'Subject',
"value": '...',
"dataType": 'Text'
},
// ....
{
"customFieldId": 84,
"name": 'Description',
"value": '...',
"dataType": 'Text'
}
]
}
jQueryajax来电
$.ajax({
type: 'post',
url: 'http://....',
dataType: 'json',
data: dataExample,
success: function (data) { /* ... */ }
});
axios + query-string ajax 调用
import axios from "axios";
import qs from 'query-string'
const dataQs = qs.stringify(dataExample);
return new Promise(
async (resolve, reject) => {
try {
const response = await axios({
method: 'post',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: dataQs,
url: 'http://....'
});
if (response) return resolve(response)
return reject()
} catch (err) { return reject(err) }
}
);
结果
问题
jQuery 从来没有任何类型的问题 但 axios + query-string,尽管不同 headers 喜欢
'content-type': 'application/json',
'content-type': 'multipart/form-data',
and/or 可选的字符串化选项,如
const dataQs = qs.stringify(data, { encode: false })
const dataQs = qs.stringify(data, { arrayFormat: 'indices', commaSuffix: 'bracket' })
const dataQs = qs.stringify(data, { arrayFormat: 'indices' })
const dataQs = qs.stringify(data, { arrayFormat: 'brackets' })
const dataQs = qs.stringify(data, { arrayFormat: 'repeat' })
const dataQs = qs.stringify(data, { arrayFormat: 'comma' })
一直在破坏数据..
哪个是正确的 axios + query-string(或替代)代码以获得与 jQuery?
相同的结果您可以使用类似下面的内容
const objectToQueryString = (initialObj) => {
const reducer = (obj, parentPrefix = null) => (prev, key) => {
const val = obj[key];
key = encodeURIComponent(key);
const prefix = parentPrefix ? `${parentPrefix}[${key}]` : key;
if (val == null || typeof val === 'function') {
prev.push(`${prefix}=`);
return prev;
}
if (['number', 'boolean', 'string'].includes(typeof val)) {
prev.push(`${prefix}=${encodeURIComponent(val)}`);
return prev;
}
prev.push(Object.keys(val).reduce(reducer(val, prefix), []).join('&'));
return prev;
};
return Object.keys(initialObj).reduce(reducer(initialObj), []).join('&');
};
objectToQueryString({
name: 'John Doe',
age: 20,
children: [
{ name: 'Foo Doe' },
{ name: 'Bar Doe' }
],
wife: {
name: 'Jane Doe'
}
});
// -> name=John%20Doe&age=20&children[0][name]=Foo%20Doe&children[1][name]=Bar%20Doe&wife[name]=Jane%20Doe
摘自以下要点