让前端飞前端开发笔记

URLSearchParams 配合 axios 提交重复的参数

2018-08-14  本文已影响16人  后除

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。其中 URLSearchParams.append() 插入一个指定的键/值对作为新的搜索参数,这个方法可以插入重复的值,但当使用 URLSearchParams.set() 设置同名键值时会覆盖前面的值。

示例:

const params = new URLSearchParams()
params.append('date', '2018')
params.append('date', '8')
params.append('date', '13')
console.log(params.toString()) // date=2018&date=8&date=13
params.set('date', '20180813')
console.log(params.toString()) // date=20180813

可以直接用 for...of 遍历出键值:

const params = new URLSearchParams()
params.append('date', '2018')
params.append('date', '8')
params.append('date', '13')
params.set('name', 'mazey')
for (let [k, v] of params) {
    console.log(k, v) // date 2018 date 8 date 13 name mazey
}

配合 axios:

const params = new URLSearchParams()
params.append('date', '2018')
params.append('date', '8')
params.append('date', '13')
axios({
  method: 'get',
  url: '/',
  params
})
  .then((res) => {
    console.log(res.status) // 200
  })
// 请求链接为:http://localhost:8081/?date=2018&date=8&date=13
上一篇下一篇

猜你喜欢

热点阅读