axios傳參問題:將一個物件轉成queryString
阿新 • • 發佈:2019-02-19
最近在做vue + axios
專案的時候,遇到了一個axios
傳參的問題。
以下是一個我在使用axios
中get方法呼叫後臺資料的示例:
getDetailInformation () { let query = { userId : 100001, userName: "cynthia" } axios.get('/project/getRequestDetail.spr', {params: query}, {headers:{'Content-type':'application/x-www-form-urlencoded'}}) .then((res) => { console.log("從後臺介面成功獲取到的資料", res) }) .catch((err) => { console.log("介面呼叫失敗"); }) }
在這個方法中,呼叫後臺介面傳遞的引數是一個物件,在瀏覽器實際顯示呼叫這個介面的引數是這樣的:
{
"params": {
"userId": "100001",
"userName": "cynthia"
}
}
但是,後臺希望接收到的實際的引數則是這個樣子的:
userId=10001
userName=cynthia
或:userId=10001&userName=cynthia (view source)
也就是一個Form Data
的形式,所以上面簡單的 {params: query}
這種傳參就有問題了,需要對傳遞的引數進行轉換。
而我在解決這個引數形式的問題,就是寫一個toQueryString
function cleanArray(actual) { const newArray = []; for (let i = 0; i < actual.length; i++) { if (actual[i]) { newArray.push(actual[i]); } } return newArray; } // 將一個物件轉成QueryString function toQueryString(obj) { if (!obj) return ""; return cleanArray( Object.keys(obj).map(key => { if (obj[key] === undefined) return ""; return encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]); }) ).join("&"); }
然後再次呼叫介面的時候:
getDetailInformation () {
let query = {
userId : 100001,
userName: "cynthia"
}
axios.get('/project/getRequestDetail.spr', toQueryString(query), {headers:{'Content-type':'application/x-www-form-urlencoded'}})
.then((res) => {
console.log("從後臺介面成功獲取到的資料", res)
})
.catch((err) => {
console.log("介面呼叫失敗");
})
}
這樣就可以給後臺傳遞正確的引數:
userId=10001
userName=cynthia
至此,axois
傳參遇到的一個小問題就解決啦~
PS : 感謝閱讀,如果有更好的辦法,可以互相交流一下鴨~