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