1 vueのgetメソッドで配列パラメータを渡す方法
配列をオブジェクトに直接渡す
export function getCrApplicationList(data) {
var test = [‘111‘, ‘222‘]
return request({
url: ‘/applicant/CrApplication/List‘,
method: ‘get‘,
params: { test }
})
}
ただし、この場合、背景は値を取得できないため、配列を次の形式に変更する必要があります。
テスト:111
テスト:222
最初に axios.js を見つけて、次のコードを追加します。
if (config.method === ‘get‘) {
// 如果是get请求,且params是数组类型如arr=[1,2],则转换成arr=1&arr=2
config.paramsSerializer = function(params) {
return qs.stringify(params, { arrayFormat: ‘repeat‘ })
}
}
get リクエストのパラメーターが配列形式の場合、配列内の各項目の属性名が再利用されます。
同様に、このメソッドは、post メソッドが get メソッドのパラメーター形式を渡すときによく使用されます。
カプセル化されたインターフェース部分:
/**
* @description 以post请求方式,传递array[]数组
* @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.1投稿: データでパラメーターを渡す
/**
* 添加动物种类
* @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.2 get: params でパラメーターを渡す
/**
* 根据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)
})
},