なぜ 'axios'と$ http（vue-resource）がjsonクエリ文字列に対して異なる動作をするのでしょうか？ - json、vue.js、axios、vue-resource

私は開発していました 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"

2番目のケースでは ネットワーク呼び出しのクエリ文字列は

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

今私の質問は なぜこれが起こっているのか、そして最初のフォーマットを達成する方法 axios. json文字列を手動で配列に変換したくない

回答：

回答№1の場合は3

これは、AxiosがJavaScriptオブジェクトをJSONにシリアル化するために発生しています。 application / x-www-form-urlencoded形式でシリアル化するには、次のいずれかを使用する必要があります。 Axiosのドキュメントに記載されているテクニック.

おもう qs あなたにとって素晴らしい解決策です：

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

---

回答№2の場合は1

Axios デフォルトは application/json 中にパラメータを送信するとき vue-resource あなたの場合はそれらを送っていました application/x-www-form-urlencoded フォーマット。

あなたは私がこれから得たこの機能を使うことができます 要旨 それを使用して、オブジェクトを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"
}
})

---