vue get与post传参方式
程序员文章站
2022-04-15 12:40:09
...
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)
})
})
},
上一篇: JS 异步解决方案的发展历程以及优缺点
下一篇: 日常问题---浏览器URL参数乱码问题