传url链接参数 前端get方法_JS实现前端调用后端get请求在url后拼接参数

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

以下是我自己封装了一个获取参数的方法，在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

文章来源：码云笔记