URLSearchParams初体验

在以前发的工具方法文章的留言中有人就关于验证网址的操做时可使用URL对象，以后有人提到了URLSearchParams这个URL对象接口。因为以前没有接触过，因此搜索了一下具体的用处，发现这个接口的功能很实用，特此整理分享一下。

URLSearchParams是什么

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。参照

从而咱们能够知道，它是用来处理URL相关的。那具体都有哪些功能呢？

接口方法

首先，咱们调用new URLSearchParams()会返回一个 URLSearchParams 对象实例。在这个实例下面咱们能够调用如下方法：

append(name, value):插入一个指定的键/值对做为新的搜索参数。 其中name是须要插入搜索参数的键名，value是须要插入搜索参数的对应值。

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

//添加第二个foo搜索参数。
params.append('foo', 4);
params.toString();
// 'foo=1&bar=2&foo=4'
复制代码

delete(name):从搜索参数列表里删除指定的搜索参数及其对应的值。 name是须要删除的键值名称。

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

//添加第二个foo搜索参数。
params.delete('foo');
params.toString();
// 'bar=2'
复制代码

entries():返回一个iterator能够遍历全部键/值对的对象。

// 建立一个测试用 URLSearchParams 对象
let searchParams = new URLSearchParams("key1=value1&key2=value2");

// 显示键/值对
for(var pair of searchParams.entries()) {
   console.log(pair[0]+ ', '+ pair[1]); 
}

// key1, value1
// key2, value2
复制代码

get(name):获取指定搜索参数的第一个值。 name是将要返回的参数的键名。返回一个USVString；若是没有，则返回null。 若是一个页面的URL是 https://example.com/?name=Jonathan&age=18 ，你能够这样解析参数name和age:

let params = new URLSearchParams(document.location.search.substring(1));
let name = params.get("name"); // is the string "Jonathan"
let age = parseInt(params.get("age"), 10); // is the number 18

// 查找一个不存在的键名则返回 null:
let address = params.get("address"); // null
复制代码

getAll(name):获取指定搜索参数的全部值，返回是一个数组。 name是返回的参数的名称。

let url = new URL('https://example.com?foo=1&bar=2'); 
let params = new URLSearchParams(url.search.slice(1)); 

//为foo参数添加第二个值 
params.append('foo', 4);

console.log(params.getAll('foo'))' //输出 ["1","4"]. 复制代码

has(name):返回 Boolean 判断是否存在此搜索参数。 name 是咱们要查询的参数的键名。

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

params.has('bar') === true; //true
复制代码

keys():返回iterator 此对象包含了键/值对的全部键名。

// 创建一个测试用URLSearchParams对象
let searchParams = new URLSearchParams("key1=value1&key2=value2"); 

// 输出键值对
for(var key of searchParams.keys()) { 
  console.log(key); 
}

// key1
// key2
复制代码

set(name, value):设置一个搜索参数的新值，假如原来有多个值将删除其余全部的值。 其中name是须要插入修改参数的键名，value是须要插入搜索参数的新值。

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

//Add a third parameter.
params.set('baz', 3);
复制代码

sort(): 按键名排序。

// Create a test URLSearchParams object 
let searchParams = new URLSearchParams("c=4&a=2&b=3&a=1"); 

// Sort the key/value pairs
searchParams.sort();

// Display the sorted query string
console.log(searchParams.toString());

// a=2&a=1&b=3&c=4
复制代码

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

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

//Add a second foo parameter.
params.append('foo', 4);
console.log(params.toString());
//Prints 'foo=1&bar=2&foo=4'.
复制代码

values():返回iterator 此对象包含了键/值对的全部值。

// 建立一个测试用URLSearchParams对象
let searchParams = new URLSearchParams("key1=value1&key2=value2");

// 输出值
for(var value of searchParams.values()) {
  console.log(value);
}
复制代码

上面就是针对其全部的接口方法进行的一个梳理。然而，感受好像和咱们平时的关联没有很大呢？下面让咱们来看几个具体的使用场景。

使用场景

场景一 获取浏览器地址参数

咱们以前在获取浏览器地址参数时不少时候是经过对地址进行分割，而后拼接字段对象的方式来作的，相似

function GetRequest() {
  let url = location.search; //获取url中"?"符后的字串
  let theRequest = new Object();
  if (url.indexOf("?") != -1) {
    let str = url.substr(1);
    strs = str.split("&");
    for (let i = 0; i < strs.length; i++) {
      theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
    }
  }
  return theRequest;
}
复制代码

可是咱们若是使用URLSearchParams时就不用这么繁琐了

const params = new URLSearchParams(location.search)
params.get(key)
复制代码

使用URLSearchParams处理axios发送的数据

在咱们使用axios和fetch来替换以前的ajax进行数据请求时，咱们会遇到数据格式不一致的问题。

axios({
    method: 'post',
    url: '/test',
    data: {
        name: 'li lei',
        age: 18
    }
})
复制代码

上面的调用方法和咱们使用ajax时很是类似，咱们可能也会天然而然的这样来写，可是咱们会发现，其默认的数据格式是有差异的：

axios数据格式：

ajax数据格式：

是的，多了一层包裹，这样和咱们后端的对接就出现问题了。哪怕是手动去修改ContentType为application/x-www-form-urlencoded仍然没有解决.

那么URLSearchParams能如何解决呢

let params = new URLSearchParams();
params.append('name', 'li lei');
params.append('age', 18);

axios({
    method: 'post',
    url: '/test',
    data: params
})
复制代码

兼容性解决

工具好用，可是不可避免的兼容性并无那么的理想。那咱们该怎么办呢？

工欲善其事，必先利其器

url-search-params-polyfill

这是一个专门为URLSearchParams制做的polyfill库。具体的使用方法你们能够参照库的相关说明。在这主要再强调一下，这个库可以解决浏览器的兼容性问题，可是在使用fetch进行请求调用时，咱们仍然须要手动去设置ContentType的值。引用该库中给到的一个实例

function myFetch(url, { headers = {}, body }) {
    headers = headers instanceof Headers ? headers : new Headers(headers);
    
    if (body instanceof URLSearchParams) {
        headers.set('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    }
    
    fetch(url, {
        headers,
        body
    });
}
复制代码

小结

经过咱们对官方接口的说明以及实际场景的使用，详细了解了URLSearchParams的主要功能和使用方法，但愿可以在咱们之后的开发中起到帮助做用。

---

参考资料： URLSearchParams API 使用URLSearchParams处理axios发送的数据

---

关注微信公众号同步推送更新

或者能够去Github上面给个Star