async search (event) {
// 声明url变量
let url = ''
// 根据调用本方法Html元素 的ID,来选择发送axios请求的 url地址, (区分,初始页,上一页或者下一页的 url地址)
if (event.target.id === 'previous') {
url = this.previous
} else if (event.target.id === 'next') {
url = this.next
} else {
// 下面的写法可能用,但感觉很难受,有其它写法吗??--------------------------------------------------------------
url = 'group/?project_name=' + this.inputProjectName + '&sample_name=' +
this.inputSampleName + '&orderdate_gte=' + this.inputDateGte + '&orderdate_ite=' + this.inputDateIte + '&offset=' + 0
}
// 向后后端发送get请求,并返回数据对象 res
const { data: res } = await this.$http.get(url)
var a = {
previous:this.previous,
next:this.next,
}
const { data: res } = await this.$http.get(a[event.target.id] || "/group", { params: a[event.target.id] ? {} : {
project_name: this.inputProjectName,
sample_name: this.inputSampleName,
orderdate_gte: this.inputDateGte,
orderdate_ite: this.inputDateIte,
offset: 0,
})
有用望采纳
可以用这种,看着更舒服点
this.$http.get('/group', {
params: {
project_name: this.inputProjectName,
sample_name:this.inputSampleName,
...
}
})
程序没问题就行,一般都这么干,如果请求比较多,可以抽出来放到一个文件里
哈喽,简单的话可以封装个公共方法,复杂的可以将每个请求拆成url和请求,分在不同文件夹,再进行分模块引入请求,更多的还可以搭配Vuex用,这里先给你演示一下简单的:
公共方法:
/**
* @function simpleRequest 简单的请求
* @param url 接口地址
* @param method 请求类型 默认 get
* @param data 数据参数
* @param option 配置项
*/
export function simpleRequest(url,method='get',data,option={}) {
return ()=>{
return new Promise((resolve, reject) => {
http.request(Object.assign({
url,
method,
params: method==='get'? data: {},
data: method==='post'? data: {}
},option)).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
}
请求演示:
simpleRequest('group','get',{
project_name: this.inputProjectName,
sample_name: this.inputSampleName,
orderdate_gte: this.inputDateGte,
orderdate_ite: this.inputDateIte,
offset: 0,
}).then((res)=>{
console.log("操作");
})