javascript - axios + 查询字符串与 jQuery，查询字符串破坏的 POST 数据

Question

我们要通过ajax发送的数据示例

const dataExample = {
    "userId": '...id',
    "supportFormId": 14,
    "supportFormName": 'Tickets',
    "customFields": [
        {
            "customFieldId": 80,
            "name": 'Subject',
            "value": '...',
            "dataType": 'Text'
        },
        // ....
        {
            "customFieldId": 84,
            "name": 'Description',
            "value": '...',
            "dataType": 'Text'
        }
    ]
}

jQuery ajax 调用

$.ajax({
    type: 'post',
    url: 'http://....',
    dataType: 'json',
    data: dataExample,
    success: function (data) { /* ... */ }
});

axios + 查询字符串 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，尽管有不同的 header ，例如

'content-type': 'application/json',
'content-type': 'multipart/form-data',

和/或可选的字符串化选项，如

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 + 查询字符串(或替代)代码来获得与 jQuery 相同的结果？

Answer 1

你可以使用类似下面的东西

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

取自下面的要点

https://gist.github.com/tjmehta/9204891