简单的URL参数拼接

简介

api.xxxxx.xx/problems/se…
场景：在请求的 API 中附带参数，以?、&连接
推荐使用社区 npm 包： qs 或 query-string 实现该功能

参数拼接

const parseParams = (uri, params) => {
  const paramsArray = []
  Object.keys(params).forEach(key => params[key] && paramsArray.push(`${key}=${params[key]}`))
  if (uri.search(/\?/) === -1) {
    uri += `?${paramsArray.join('&')}`
  } else {
    uri += `&${paramsArray.join('&')}`
  }
  return uri
}
复制代码

let params = {
  keyword: 't',
  page: 1,
  size: 2
}
let uri = 'http://api.xxxxx.xx/problems/search'
parseParams(uri, params)
//http://api.xxxxx.xx/problems/search?keyword=t&page=1&size=2
复制代码

FormData

urlEncode (params) {
  let paramsArray = []
  Object.keys(params).forEach(key => params[key] && paramsArray.push(`${key}=${params[key]}`))
  return paramsArray.join('&')
}
复制代码

let params = {
  name: 'cs1'
  email: 'cs1@cs1.com'
  mobile: '1xxxxxxxxxx'
  password: '123456'
  password_confirmation: '123456'
  captcha: 'xxhej'
}
parseParams(params)
//name=cs1&email=cs1@cs1.com&mobile=15603315002&password=123456&school=neuq&password_confirmation=123456&captcha=xxhej
复制代码

分析

• 创建空数组

const paramsArray = []
复制代码

• 遍历对象的 key 属性，只要对应的 value 存在，就将其以 key=value 的形式存入数组

Object.keys(params).forEach(key => params[key] && paramsArray.push(`${key}=${params[key]}`))
复制代码

• 利用Array.join()方法拼接数组元素为字符串，如果之前无? 在url中填加

if (uri.search(/\?/) === -1) {
  uri += `?${paramsArray.join('&')}`
} else {
  uri += `&${paramsArray.join('&')}`
}
return uri
复制代码