axios的get請(qǐng)求傳入數(shù)組參數(shù)原理詳解
axios 發(fā)送 get 請(qǐng)求
axios 發(fā)送 get 請(qǐng)求的一般方式如下:
axios.get(url,{params:{
a:1
}})
但是，如果 params 里有數(shù)組參數(shù)的話，上面的方法就會(huì)帶來(lái)問(wèn)題。
例如, 這里發(fā)送的請(qǐng)求參數(shù) b 是數(shù)組:
axios.get(url,{params:{
a:1,
b:[1,2]
}})
這時(shí)候，后端 Django 用 request.GET.getlist('b') 獲取到的參數(shù) b 一直是 [].
原因
原因是對(duì)數(shù)組的序列化有多種方式，我們需要前后端統(tǒng)一序列化方式，才能夠正確解碼。
Django 的 request.GET.getlist('b') , 對(duì)請(qǐng)求參數(shù) b 的序列化要求是這樣子的
b=1&b=2
也就是說(shuō)，用&連接數(shù)組中的元素，這并不是 axios 默認(rèn)的序列化方法。
解決方法
需要指定 axios 的序列化方式，我們可以用 paramsSerializer 參數(shù)指定序列化函數(shù)。
更簡(jiǎn)單的方式是使用 qs 庫(kù)：
import qs from "qs";
axios.get(url,{
params:{
a:1,
b:[1,2]
},
paramsSerializer: function (params) {
return qs.stringify(params, { arrayFormat: "repeat" });
},
})以上就是axios的get請(qǐng)求傳入數(shù)組參數(shù)原理詳解的詳細(xì)內(nèi)容，更多關(guān)于axios get請(qǐng)求傳入數(shù)組參數(shù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JS返回只包含數(shù)字類型的數(shù)組實(shí)例分析
這篇文章主要介紹了JS返回只包含數(shù)字類型的數(shù)組實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了循環(huán)遍歷數(shù)組及正則匹配兩種實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12
JavaScript實(shí)現(xiàn)鼠標(biāo)控制自由移動(dòng)的窗口
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)控制自由移動(dòng)的窗口，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了JavaScript 防抖和節(jié)流,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09
JavaScript封裝LINQ查詢方法實(shí)戰(zhàn)
本文主要介紹了通過(guò)js-linq庫(kù)在JavaScript中實(shí)現(xiàn)類似.NET LINQ的查詢功能,封裝Where、Select、OrderBy等方法,提升數(shù)組和可迭代對(duì)象的數(shù)據(jù)處理效率與代碼可讀性2025-09-09
微信小程序8種數(shù)據(jù)通信的方式小結(jié)
這篇文章主要介紹了微信小程序8種數(shù)據(jù)通信的方式小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
uniapp中使用vuex的過(guò)程(解決uniapp無(wú)法在data和template中獲取vuex數(shù)據(jù)問(wèn)題)
這篇文章主要介紹了uniapp中使用vuex（解決uniapp無(wú)法在data和template中獲取vuex數(shù)據(jù)問(wèn)題）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05![javascript getBoundingClientRect() 來(lái)獲取頁(yè)面元素的位置的代碼[修正版]](http://img.jbzj.com/images/xgimg/bcimg6.png)
javascript getBoundingClientRect() 來(lái)獲取頁(yè)面元素的位置的代碼[修正版]
該方法已經(jīng)不再是IE Only了，F(xiàn)F3.0+和Opera9.5+已經(jīng)支持了該方法，可以說(shuō)在獲得頁(yè)面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必須通過(guò)循環(huán)來(lái)獲得元素在頁(yè)面中的絕對(duì)位置。2009-05-05
js實(shí)現(xiàn)的倒計(jì)時(shí)按鈕實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的倒計(jì)時(shí)按鈕,實(shí)例分析了javascript倒計(jì)時(shí)效果的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-06-06
Firefox 無(wú)法獲取cssRules 的解決辦法
Firefox 無(wú)法獲取cssRules 的解決辦法...2006-10-10
瀏覽器是如何將HTML、CSS和JS渲染成網(wǎng)頁(yè)的詳解
在前端開發(fā)中,了解瀏覽器如何將 HTML、CSS 和 JavaScript 轉(zhuǎn)換為用戶最終看到的頁(yè)面,對(duì)于性能優(yōu)化、問(wèn)題排查以及構(gòu)建高效應(yīng)用至關(guān)重要,這篇文章主要介紹了瀏覽器是如何將HTML、CSS和JS渲染成網(wǎng)頁(yè)的相關(guān)資料,需要的朋友可以參考下2025-09-09