JS实现前端调用后端get请求在url后拼接参数

前端开发中,经常会遇到在URL后拼接参数的需要,而我最近在做项目的时候就遇到了,所以特此把自己的实现方式做了一个总结记录下来,也为其他需要的小伙伴做个参考。前端在调用后端GET请求时,url的接口名称和参数一般是字符串拼接的方式,为了避免字符串拼接时key值对应的value为null对后端的判断造成干扰,前端可以处理为value为null时该参数的key值省略不传。

JS实现前端调用后端get请求在url后拼接参数

以下是我自己封装了一个获取参数的方法,在vue的methods方法中:

/**
 * @function 参数拼接
 * @param {object} obj 只支持非嵌套的对象
 * @returns {string}
 * @author 码云笔记 2020-4-24
 */
params(obj:any) {
  let result = '';
  let item;
  for (item in obj) {
    if (obj[item] && String(obj[item])) {
      result += `&${item}=${obj[item]}`;
    }
  }
  if (result) {
    result = '&' + result.slice(1);
  }
  return result;
}

如何使用呢?假如我们参数是这个样子的:

const obj = {
  name: '码云笔记',
  value: 'mybj123',
  msg: ''
}

然后在我们需要的地方使用上面封装好的参数方法

const url = `/get/info/${this.params(obj)}`;
console.log(url);

最终在浏览器中显示的URL就是

https://域名/get/info/&name=码云笔记&value=mybj123
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » JS实现前端调用后端get请求在url后拼接参数

发表评论