Xu's Pub

简单的 url 参数拼接

发表于 | 分类于 |

http://api.xxxxx.xx/problems/search?keyword=t&page=1&size=2
场景：在请求的 API 中附带参数，以?、&连接
推荐使用社区 npm 包： qs 或 query-string 实现该功能 【2017年11月19日更新】

参数拼接

1
2
3
4
5
6
7
8
9
10
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
}
1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
5
urlEncode (params) {
  let paramsArray = []
  Object.keys(params).forEach(key => params[key] && paramsArray.push(`${key}=${params[key]}`))
  return paramsArray.join('&')
}
1
2
3
4
5
6
7
8
9
10
11
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

分析

  • 创建空数组

    1
    const paramsArray = []

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

    1
    Object.keys(params).forEach(key => params[key] && paramsArray.push(`${key}=${params[key]}`))

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

    1
    2
    3
    4
    5
    6
    if (uri.search(/\?/) === -1) {
      uri += `?${paramsArray.join('&')}`
    } else {
      uri += `&${paramsArray.join('&')}`
    }
    return uri