前端開(kāi)發(fā)中，經(jīng)常會(huì)遇到在URL后拼接參數(shù)的需要，而我最近在做項(xiàng)目的時(shí)候就遇到了，所以特此把自己的實(shí)現(xiàn)方式做了一個(gè)總結(jié)記錄下來(lái)，也為其他需要的小伙伴做個(gè)參考。前端在調(diào)用后端GET請(qǐng)求時(shí)，url的接口名稱(chēng)和參數(shù)一般是字符串拼接的方式，為了避免字符串拼接時(shí)key值對(duì)應(yīng)的value為null對(duì)后端的判斷造成干擾，前端可以處理為value為null時(shí)該參數(shù)的key值省略不傳。

以下是我自己封裝了一個(gè)獲取參數(shù)的方法，在vue的methods方法中：

/**

?* @function 參數(shù)拼接

?* @param {object} obj 只支持非嵌套的對(duì)象

?* @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;

}

如何使用呢？假如我們參數(shù)是這個(gè)樣子的：

const obj = {

? name: '碼云筆記',

? value: 'mybj123',

? msg: ''

}

然后在我們需要的地方使用上面封裝好的參數(shù)方法

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

console.log(url);

最終在瀏覽器中顯示的URL就是

https://域名/get/info/&name=碼云筆記&value=mybj123

原文鏈接：https://www.mybj123.com/6040.html