URL結(jié)構(gòu)、組成、query、hash、axios數(shù)組傳遞錯(cuò)誤、HTTP 請(qǐng)求

伴隨著微信消息的提示音 小四 發(fā)來(lái)一段代碼說(shuō) 不知道為什么請(qǐng)求不到頁(yè)面數(shù)據(jù)：

axios.get("users", {
    params: { ids: [1, 2, 3] }
})

小二一看大概率是 query 中數(shù)組傳遞方式引起的，由于后端實(shí)現(xiàn)解析數(shù)組 ids:[5, 6, 100] 可能有以下幾種方式：

bracket: ids[]=1&ids[]=2&ids[]=3

index: ids[0]=1&ids[1]=2&ids[3]=3

comma: ids=1,2,3

none: ids=1&ids=2&ids=3

小四分別測(cè)試后便把問(wèn)題解決了，這也讓小二想起 小熊貓哥哥 在開(kāi)發(fā)的時(shí)候，也遇到過(guò)這個(gè)問(wèn)題網(wǎng)上一搜發(fā)現(xiàn)別人用 qs 庫(kù)中的 stringify 直接代碼一試沒(méi)報(bào)錯(cuò)能運(yùn)行，不管它的原理是什么，現(xiàn)在想想挺可怕的。

雖然天天和 URL 打交道但并不是所有人都懂它。
對(duì)于為什么代碼能運(yùn)行也不是所有人都會(huì)去深究它。

利用 URL() 對(duì)象可以快速的把一個(gè) url地址 打回原形：

腳本

const url = new URL("http://www.pushme.top/users?sort_by=asc#page=userlist")
console.log(url)

輸出

{
    hash: "#page=userlist"
    host: "www.pushme.top"
    hostname: "www.pushme.top"
    href: "http://www.pushme.top/users?sort_by=asc#page=userlist"
    origin: "http://www.pushme.top"
    password: ""
    pathname: "/users"
    port: ""
    protocol: "http:"
    search: "?sort_by=asc"
    searchParams: URLSearchParams {}
    username: ""
}

沒(méi)想到吧 小小的一段 url地址 里面居然有這么多屬性，在這里主要會(huì)講解的 hash 和 search。

推薦打開(kāi)控制臺(tái)把腳本運(yùn)行一下，這樣閱讀的時(shí)候就不需要上下對(duì)照查看了。

眼尖的同學(xué)肯定發(fā)現(xiàn)了 host 和 hostname 居然一模一樣這是為什么呢？

回憶一下開(kāi)發(fā)經(jīng)常在見(jiàn)到的 localhost:8080，這里出現(xiàn)了端口號(hào) 8080 而平時(shí)使用訪問(wèn)一些網(wǎng)站的時(shí)候卻沒(méi)有帶上端口號(hào)。這是因?yàn)?url地址 會(huì)默認(rèn)端口號(hào)為 80，所以你仔細(xì)看看會(huì)發(fā)現(xiàn)上面 port 的值為空。

而 host 和 hostname 的區(qū)別便是有 port 的時(shí)候 host 會(huì)包含端口號(hào)，而 hostname 不會(huì)包含。

protocol 指的便是 協(xié)議 最常見(jiàn)的有 http 和 https，當(dāng)然現(xiàn)在瀏覽器再不輸入?yún)f(xié)議時(shí)會(huì)自動(dòng)幫你加上，不過(guò)在 URL() 不帶上協(xié)議可是會(huì)報(bào)錯(cuò)的哦。origin 則為 protocel 和 host 拼接組成。

?search=a 中 query 以第一個(gè)?開(kāi)始至行尾或#結(jié)束。用于向后端傳遞一些數(shù)據(jù)，數(shù)據(jù)使用 & 進(jìn)行分隔，值使用 = 分隔。通過(guò)一段代碼來(lái)理解一下：

const query = "id=1&sort=asc&hello=world";
// 對(duì) & 分割取得數(shù)據(jù)對(duì)
const data = query.split("&").reduce((data,keyValue) => {
    const [ key, value ] = keyValue.split("=");
    return (data[key] = value, data);
}, {});

// 輸出 {id: "1", sort: "asc", hello: "world"}
console.log(data);

這就是 query 最基礎(chǔ)的數(shù)據(jù)對(duì)的組合方式，當(dāng)然開(kāi)頭的四種 數(shù)組 的表達(dá)方式需要進(jìn)行另外的處理，無(wú)外乎就是對(duì) key 的收集 和 value 的判斷。不過(guò)這部分基本上后端的框架都幫我們處理好了，前端也可以使用 qs、query-string、qss 等庫(kù)來(lái)完成。

題外話：這幾個(gè)庫(kù)代碼都挺少的，值得一讀說(shuō)不定有新收獲。

每天使用的 百度 和 谷歌 中不知道大家有沒(méi)有主要到這幾個(gè)細(xì)節(jié)：

輸入 https://www.baidu.com/s?wd=小二+pushmetop 搜索框中出現(xiàn)的是小二 pushmetop，地址欄中url地址的 + 神奇的變成了 空格。

輸入 https://www.baidu.com/s?wd=小二 pushmetop 搜索框中出現(xiàn)的是小二 pushmetop，地址欄中url地址的 空格 的變成 %20。

輸入 https://www.baidu.com/s?wd=小二%2Bpushmetop 搜索框中出現(xiàn)的是小二+pushmetop，地址欄中url地址的 %2B 的變成 +。

具體原因可以查看 維基百科 關(guān)于 保留字符的百分號(hào)編碼 。

在 掘金 等網(wǎng)站點(diǎn)擊鏈接都會(huì)快速的閃現(xiàn)類(lèi)似 http://www.pushmetop.com?redirect=xxxxx 的 url地址，會(huì)發(fā)現(xiàn) redirect 對(duì)應(yīng)的重定向地址會(huì)是一堆夾帶 % 的亂碼這是為什么呢？

讓我們假設(shè)需要跳轉(zhuǎn)的鏈接是 www.test.com?hello=world&id=1,把整個(gè)鏈接拼接起來(lái)則為：

http://www.pushmetop.com?redirect=www.test.com?hello=world&id=1

根據(jù)一開(kāi)始的定義 解析值 和 預(yù)期值 完全不同了：

解析值

{
    "redirect": "www.test.com?hello=world",
    "id": "1"
}

預(yù)期值

{
    "redirect": "www.test.com?hello=world&id=1"
}

為了解決這個(gè)問(wèn)題便誕生了 URL編碼 來(lái)解決問(wèn)題：

encodeURIComponent() 和 decodeURIComponent() 推薦使用。

encodeURI() 和 decodeURI() 對(duì)比前者不會(huì)對(duì) "; / ? : @ & = + $ , #" 這些字符編碼。

escape() 和 unescape() 不推薦使用。

例子

let redirect = "www.test.com?hello=world&id=1";
redirect = encodeURIComponent(redirect);

let url = `http://www.pushmetop.com?redirect=${redirect}`;
url = new URL(url)

// 輸出: www.test.com?hello=world&id=1
console.log(url.searchParams.get("redirect"))

#hash 中 fragment 以 # 為開(kāi)始 行尾 為結(jié)束。在 回到頂部 中有提到過(guò)利用hash錨點(diǎn)來(lái)進(jìn)行跳轉(zhuǎn)，如果大家注意觀察的話會(huì)發(fā)現(xiàn) hash 的改變不會(huì)引起頁(yè)面的刷新。

在 Angular.js、Vue Router 等庫(kù)中，會(huì)利用在 html5 中提供了 history 的一系列操作，來(lái)幫助我們不刷新頁(yè)面管理 url。但是在一些舊的瀏覽器上并不兼容時(shí)，會(huì)利用 hash 不會(huì)主動(dòng)觸發(fā)瀏覽器 reload 的特性來(lái)修改 location.hash 來(lái)管理路由。 當(dāng)然 hash 的另外一個(gè)特點(diǎn)是可以被保存為書(shū)簽，也是一大優(yōu)點(diǎn)。

hash 的小妙用也可以像 query 那樣利用 & 和 = 來(lái)存取數(shù)據(jù)，當(dāng)然你也可以定制屬于你的規(guī)則。

href 為整個(gè) url地址。而 pathname 屬性包含 URL 的整個(gè)路徑部分。它跟在 host （包括 port）后面，排在 query 或 hash 組成部分的前面且被 ASCII 問(wèn)號(hào)（?）或哈希字符（#）分隔。

username 和 password 在日常使用中很少用，它們可以合稱為 auth。該字符串跟在 protocol 和雙斜杠（如果有）的后面，排在 host 部分的前面且被一個(gè) ASCII 的 at 符號(hào)（@）分隔：

http://username:password@www.pushme.top/test/blah?something=123

本來(lái)只是想討論 hash 和 search ，結(jié)果全都過(guò)一遍，今天就辛苦大家了。

在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長(zhǎng)。

如果您想讓更多人看到文章可以點(diǎn)個(gè) 點(diǎn)贊。

如果您想激勵(lì)小二可以到 Github 給個(gè) 小星星。

如果您想與小二更多交流添加微信 m353839115。

本文原稿來(lái)自 PushMeTop