Vue axios 我的ur l写法很low, 自已都看的不舒服, 还有什么写法,


  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("操作");
})