js封装函数处理 url 地址拼接参数。

在开发工作中，我们经常会又这样的情景——得到一个url地址，需要往url后面拼接上一些params参数。

我们每次都写拼接字符串，非常的麻烦，而且这个url地址可能是后端返回，或者是存储过的变量，我们不知道url上是否已经有了参数，所以要考虑  '?' 和 '&'。

所以我们就封装一下函数，我们只需要传 url  和想拼接的  params 就能得到 拼接好的 url地址。

个人实力有限，不足之处，敬请指正~

ok，开干。

// 给url后面拼接参数
export function buildUrlWithParams(url = "", params = {}) {
  //若参数对象不存在或为空，直接返回url
  if (!params || Object.keys(params).length === 0) {
    return url
  }
  //将参数转化为字符串 eg: {userId: 123,token:'abc'} => 'userId=123&token=abc'
  return url + (url.includes("?") ? "&" : "?") + new URLSearchParams(params).toString()
}


// 给url后面拼接userId和token参数
export function buildUrlWithToken(url = "") {
  return buildUrlWithParams(url, { userId: user.getUserId(), token: user.getUserToken() })
}

user.getUserId() 和 user.getUserToken() 是我们项目里面自己封装的获取 userId 和 token 的,仅展示。 大家可以自己处理。

函数里面使用了 new URLSearchParams ()  .这是一个构造函数，定义了一些实用的方法来处理 URL 的查询字符串。 返回的实例上有一些方法可以操作url 参数。

new URLSearchParams(params).toString()  返回搜索参数组成的字符串，可直接使用在URL上。

具体的用法 和 其它的实例方法 mdn上有介绍

MDN文档链接：https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams/URLSearchParams