json - 为什么 'axios' 和 $http (vue-resource) 对 json 查询字符串的行为不同？

Question

我正在开发一个 vue 应用程序并使用 vue-resource 从服务器获取数据

我使用 vue-resource 的代码是

this.$http.get('api/url', {
     params: {
         authData: authData,
         otherData: otherData
     }
})

这里的 authdata 是 json 字符串，类似于 {"userName":"User+name","id":"userid",....}

现在由于某些原因我必须移动到 axios 所以我将我的代码更改为

axios.get('api/url', {
     params: {
         authData: authData,
         otherData: otherData
     }
})

在这两种情况下，数据是相同的，但是当我看到网络调用时。我得到了不同的结果。

第一种情况网络调用中的查询字符串是

authData[userName]: 'User+name'
authData[id]    : 'userid'
otherData: 'otherData'

第二种情况网络调用中的查询字符串是

authData: {"userName":"User+name","id":"userid"....}
otherData: 'otherData'

现在我的问题是为什么会发生这种情况以及如何在axios 中实现第一种格式。我不想手动将json 字符串转换为数组

Answer 1

这是因为 Axios 将 JavaScript 对象序列化为 JSON。要以 application/x-www-form-urlencoded 格式序列化，您需要使用 techniques described in the Axios documentation 之一.

我认为qs对你来说是一个很好的解决方案:

// Use object shorthand notation if it's supported in your environment
axios.post('/foo', qs.stringify({ authData, otherData }));