왜 '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","id":"userid"....} 
otherData: 'otherData' 

된 두 번째 경우에서

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

이었다 일어나고 어떻게 axios에서 첫 번째 형식을 얻을 수 있습니다. json 문자열을 배열로 수동으로 변환하고 싶지 않습니다.

Answer 1

Axios가 JSON으로 JavaScript 객체를 직렬화하기 때문에 이러한 현상이 발생합니다. application/x-www-form-urlencoded 형식으로 serialize하려면 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 인코딩 된 문자열로 변환 할 수 있습니다.

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