Por que 'axios' e $ http (vue-resource) se comportam de maneira diferente para a string de consulta do json? - json, vue.js, axios, recurso-vue

Eu estava desenvolvendo um vue aplicativo e buscar dados do servidor que eu estava usando vue-resource

Meu código usando vue-resource estava

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

Aqui o authdata é uma string json, algo como {"userName":"User+name","id":"userid",....}

Agora, por alguns motivos, eu tenho que mudar para axios Então eu mudo meu código para

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

Em ambos os casos, os dados são os mesmos, mas quando vejo a chamada de rede. Eu tenho um resultado diferente.

No primeiro caso a string de consulta na chamada de rede era

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

No segundo caso a string de consulta na chamada de rede era

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

Agora minha pergunta é por que isso está acontecendo e como obter o primeiro formato em axios. Não quero converter string json em array manualmente

Respostas:

3 para resposta № 1

Isso está acontecendo porque o Axios serializa objetos JavaScript para JSON. Para serializar no formato application / x-www-form-urlencoded, você precisará usar um dos técnicas descritas na documentação do Axios.

eu acho que qs é uma boa solução para você:

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

---

1 para resposta № 2

Axios o padrão é application/json ao enviar parâmetros enquanto vue-resource no seu caso foi enviá-los application/x-www-form-urlencoded formato.

Você poderia usar esta função que obtive deste essência e use-o para converter seu objeto em uma string codificada por 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("&");
}

Você pode usá-lo assim:

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"
}
})

---