美文网首页让前端飞前端开发笔记
URLSearchParams 配合 axios 提交重复的参数

URLSearchParams 配合 axios 提交重复的参数

作者: 后除 | 来源:发表于2018-08-14 09:07 被阅读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
    

    相关文章

      网友评论

        本文标题:URLSearchParams 配合 axios 提交重复的参数

        本文链接:https://www.haomeiwen.com/subject/hrlmbftx.html