vue中的get方法\post方法如何实现传递数组参数
作者:怡暘
这篇文章主要介绍了vue中的get方法\post方法如何实现传递数组参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
get方法\post方法如何传递数组参数
背景:项目中突然来了一个post方法传array数组的参数,且该数组参数是循环遍历所有元素按照get方法传参形式进行参数传递的,对于小白的我真的是一个打击呀。但是为了完成任务不能放弃,so通过搜索找到了解答方式(在这里非常感谢我的小伙伴雷总的热心帮助以及bubuko.com的解答)。
第一部分:vue中get方法如何传递数组参数
直接放在对象中传递数组
export function getCrApplicationList(data) { var test = [‘111‘, ‘222‘] return request({ url: ‘/applicant/CrApplication/List‘, method: ‘get‘, params: { test } }) }
传递的参数格式如下:
但是这样的话后台是取不到值的,我们需要把数组变成如下这种格式:
test:111
test: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' }) } }
最后的访问地址如下:
http://192.168.xxx.xxx:xxxx/xxx/xxx/xxx/xxxx/xxx?idList=261&idList=262&orderId=59
完结!
vue get与post传参方式
vue的封装接口中,post与get的传参方式是不同的
1.post:用data传递参数
/** * 添加动物种类 * @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.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) }) },
3.delete:params传递参数
export function deleteAnimalType (params) { return request({ url: baseUrl + '/delete', method: 'delete', params }) }
调用接口:
todelete (id) { console.log('点击操作中的删除') this.$confirm('此操作将永久删除该数据,是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) .then(() => { deleteAnimalType({ animalIds: id }).then((response) => { if (response.status == 0) { successMessage(response.statusText) } else { errMessage(response.statusText) } }).catch((error) => { errorCollback(error) }) }) },
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。