get/post请求自动拼接/加入有值参数去除空参

一、get拼接query到url

1.1、定义工具JS

/* 
*
* formatQuery.js
*
* 思路：
* 1、定义一个空字符串，用来存放待会儿拼接后的url地址
* 2、遍历传进来的对象形式的参数
* 3、如果当前参数不为null和空字符串，则进入if判断进行拼接
* 4、第一个参数前拼接上?
* 5、后面的参数前拼接上&
* 6、将最后拼接好的字符串return出去，切记不要不小心写在for循环里。
* 
*/
export function formatQuery(url, data) {
  let query = ``
  for (const key in data) {
    if (data[key] !== null && data[key] !== '') {
      if (query.length === 0) {
        query += `?${key}=${data[key]}`
      } else {
        query += `&${key}=${data[key]}`
      }
    }
  }
  url += query
  return url
}

1.2、接口中调用工具JS

/* 
*
* user.js
*
* 接口JS中的使用：
* 1、引入封装好的request请求
* 2、引入写好的工具JS
* 3、在接口方法中使用工具JS，第一个参数传url地址，第二个参数传调用接口方法时传进来的query
*
* query参数形式举例：
* data = {
*   id: this.id,
*   name: this.name
* }
*
*/
import request from '@/utils/request.js'
import { formatQuery } from '@/utils/formatQuery.js'

const api = {
  getUserInfo: `app/account/getUserInfo`
}

export default api

export function getUserInfo (query) {
  const url = formatQuery(api.getUserInfo, query)
  return request({
    url: url,
    method: 'get'
  })
}

1.3、页面中使用

/*
*
* SearchModal.vue
*
*/
<script>
import { getUserInfo } from '@/api/user.js'

export default {
  name: 'SearchModal',
  data () {
    return {
      id: '',
      name: 'Casey',
      age: '',
      height: '178',
      userInfoList: []
    }
  },
  mounted () {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo () {
      const data = {
        id: this.id,
        name: this.name,
        age: this.age,
        height: this.height
      }
      try {
        const res = await getUserInfo(data);
        if (res.code != 0) {
          this.$message.error(res.msg)
        } else {
          this.userInfoList = res.data
          this.$message.success(res.msg)
        }
      } catch (e) {
        console.log(e)
        this.$message.error(e.data.msg)
      }
    }
  }
}
</script>

1.4、请求的展现

http://xxxx/xxx/app/account/getUserInfo?name=Casey&height=178

二、post自动去除空参

2.1、定义工具类JS

/**
 * formatParams.js
 * 未处理过的参数对象传进来
 * return 出去一个Object
 *
 */

export function formatParams (obj) {
  const params = {}
  for (const key in obj) {
      if ((obj[key] === 0 || obj[key]) && obj[key].toString().replace(/(^\s*)|(\s*$)/g, '') !== '') {
          params[key] = obj[key]
      }
  }
  return params
}

2.2、接口文件中调用JS工具类

/* 
*
* user.js
*
* 接口JS中的使用：
* 1、引入封装好的request请求
* 2、引入写好的工具JS
* 3、在接口方法中使用工具JS，将传过来的对象传入工具JS，并接收他的返回值作为参数由request使用
*
*/

import request from '@/utils/request'
import { formatParams } from '@/utils/formatParams.js'

const api = {
  saveUserInfo: `app/account/saveUserInfo`
}

export default api

export function saveUserInfo(data) {
  const params = formatParams(data)
  return request({
    url: api.saveUserInfo,
    method: 'post',
    data: params
  })
}

2.3、页面中使用

/*
*
* EditModal.vue
*
*/
<script>
import { saveUserInfo } from '@/api/user.js'

export default {
  name: 'EditModal',
  data() {
    return {
      id: '',
      name: 'Casey',
      age: '',
      height: '178'
    }
  },
  mounted() {
    this.saveUserInfo()
  },
  methods: {
    async saveUserInfo () {
      const data = {
        id: this.id,
        name: this.name,
        age: this.age,
        height: this.height
      }
      try {
        const res = await saveUserInfo(data)
        if (res && res.code != 0) {
          this.$message.error(res.msg)
        } else {
          this.$message.success(res.msg)
        }
      } catch (e) {
        console.log(e)
        this.$message.error(e.data.msg)
      }
    }
  }
}
</script>

2.4、请求的展现

// url

http://xxxx/xxx/app/account/saveUserInfo

// payload

{
  name: 'Casey'
  height: '178'
}