vue中get方法\post方法如何傳遞數(shù)組參數(shù)詳解
1、vue中get方法如何傳遞數(shù)組參數(shù)
直接放在對象中傳遞數(shù)組
export function getCrApplicationList(data) {
var test = [‘111‘, ‘222‘]
return request({
url: ‘/applicant/CrApplication/List‘,
method: ‘get‘,
params: { test }
})
}但是這樣的話后臺是取不到值的,我們需要把數(shù)組變成如下這種格式:
test:111
test:222
首先找到axios.js,加如下代碼:
if (config.method === ‘get‘) {
// 如果是get請求,且params是數(shù)組類型如arr=[1,2],則轉換成arr=1&arr=2
config.paramsSerializer = function(params) {
return qs.stringify(params, { arrayFormat: ‘repeat‘ })
}
}如果get請求中參數(shù)是數(shù)組格式,則數(shù)組里每一項的屬性名重復使用。
同樣的,post方法傳get方法的傳參格式時候通用該方法。
封裝的接口部分:
/**
* @description 以post請求方式,傳遞array[]數(shù)組
* @param {Array[integer]} idList
* @param {integer} orderId
* @return {*}
*/
export function doFuncTest(idListVal, orderId) {
return request({
url: '/xxxx/xxx',
method: 'post',
baseURL: '//192.168.xxx.xxx:xxxx/xxx/xxx/xxx',
params: {
idList: idListVal,
orderId: orderId
}
})
}攔截器部分:
if (config.method === 'post') {
config.paramsSerializer = function(params) {
return qs.stringify(params, { arrayFormat: 'repeat' })
}
}2、vue get與post傳參方式
vue的封裝接口中,post與get的傳參方式是不同的
2.1post:用data傳遞參數(shù)
/**
* 添加動物種類
* @param {*} params
* @returns
*/
export function AddAnimalType (params) {
return request({
url: baseUrl + '/addAnimalType',
method: 'post',
data: params
})
}調用代碼:
下面的 this.formData 是在data中定義的列表里邊包含了id等信息
//新增
insertAnimalType () {
AddAnimalType(this.formData).then(response => {
if (response.status == 0) {
successMessage(response.statusText)
}
else {
errMessage(response.statusText)
}
}).catch(error => {
errorCollback(error)
})
},2.2get:用params傳遞參數(shù)
/**
* 根據(jù)Id獲取詳情
* id id
* @param {*} params
* @returns
*/
export function selectById (params) {
return request({
url: baseUrl + '/selectById',
method: 'get',
params
})
}調用接口:
//獲取詳情
getDetail () {
selectById({ animalId: this.formData.id }).then(response => {
if (response.status == 0) {
this.formData = response.data.animalType
}
else {
errMessage(response.statusText)
}
}).catch(error => {
errorCollback(error)
})
},總結
到此這篇關于vue中get方法\post方法如何傳遞數(shù)組參數(shù)的文章就介紹到這了,更多相關vue傳遞數(shù)組參數(shù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
在vue中使用防抖和節(jié)流,防止重復點擊或重復上拉加載實例
今天小編就為大家分享一篇在vue中使用防抖和節(jié)流,防止重復點擊或重復上拉加載實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
關于vuex狀態(tài)刷新網頁時數(shù)據(jù)被清空問題及解決
這篇文章主要介紹了關于vuex狀態(tài)刷新網頁時數(shù)據(jù)被清空問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07

