为什么 '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 }));

Answer 2

Axios 在发送参数时默认为 application/json 而 vue-resource 在你的情况下发送它们 application/x-www-form-urlencoded格式。

您可以使用我从这个 gist 中获得的这个函数，并将您的对象转换为 URL 编码字符串。

function JSON_to_URLEncoded(element, key, list){
  var list = list || [];
  if (typeof(element) == 'object'){
    for (var idx in element)
      JSON_to_URLEncoded(element[idx],key?key+'['+idx+']':idx,list);
  } else {
    list.push(key+'='+encodeURIComponent(element));
  }
  return list.join('&');
}

你可以这样使用它：

var params = JSON_to_URLEncoded({auth: {username: 'someUser', id: 'someID'}, other: 'other'})
console.log(params)

axios.get('/url?' + params, {
  headers: {
    contentType: 'x-www-form-urlencoded'
  }
})

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

Why 'axios' and $http (vue-resource) behave differently for json query string?

json

vue.js

vue-resource

axios