なぜ 'axios'と$ http（vue-resource）はjsonクエリ文字列の動作が違うのですか？

Question

私はvueアプリを開発していたと私はvue-resourceを使用してvue-resource

私のコードを使用していたサーバーからデータをフェッチするためには、ここでauthdataはJSON文字列、今のため{"userName":"User+name","id":"userid",....}

のようなものである

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

ましたいくつかの理由で私はaxiosに移動しなければならないので、コードを

に変更する

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

どちらの場合も、データは同じですが、ネットワークコールが表示されます。私は別の結果を得た。

は、最初のケースではネットワークの呼び出しでクエリ文字列は、ネットワーク呼び出しでクエリ文字列は、

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

今私の質問は、なぜこれがありましたセカンド場合

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

ました起きて、最初のフォーマットを達成する方法はaxiosです。 jsonの文字列を手作業で配列に変換したくない

Answer 1

これは、AxiosがJavaScriptオブジェクトをJSONにシリアル化するために起こります。アプリケーション/ x-www-form-urlencode形式でシリアル化するには、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-リソースはapplication/x-www-form-urlencoded形式でそれらを送信している間のparamsを送信するとき。

私はこのgistから取得した関数を使用して、オブジェクトをURLエンコードされた文字列に変換することができます。

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

：あなたはこのようにそれを使用することができます

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('&'); 
}