简介

URL构造、构成、query、hash、axios数组通报毛病、HTTP 要求

伴随着微信音讯的提示音 小四 发来一段代码说 不知道为何要求不到页面数据：

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

小二一看大几率是 query 中数组通报体式格局引发的，由于后端完成剖析数组 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

小四离别测试后便把题目处理了，这也让小二想起 小熊猫哥哥 在开辟的时刻，也遇到过这个题目网上一搜发明他人用 qs 库中的 stringify 直接代码一试没报错能运转，不管它的道理是什么，如今想一想挺恐怖的。

虽然天天和
URL 打交道但并非所有人都懂它。

关于为何代码能运转也不是所有人都邑去穷究它。

现真相

应用 URL() 对象能够疾速的把一个 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: ""
}

没想到吧 小小的一段 url地点 内里竟然有这么多属性，在这里重要会解说的 hash 和 search。

引荐翻开控制台把剧本运转一下，如许浏览的时刻就不须要高低对照检察了。

host 和 hostname

眼尖的同砚一定发明了 host 和 hostname 竟然如出一辙这是为何呢？

回想一下开辟经常在见到的 localhost:8080，这里涌现了端口号 8080 而一样平常平凡运用接见一些网站的时刻却没有带上端口号。这是由于 url地点 会默许端口号为 80，所以你细致看看会发明上面 port 的值为空。

而 host 和 hostname 的区分就是有 port 的时刻 host 会包含端口号，而 hostname 不会包含。

protocol 和 origin

protocol 指的就是 协定 最常见的有 http 和 https，固然如今浏览器再不输入协定时会自动帮你加上，不过在 URL() 不带上协定可是会报错的哦。origin 则为 protocel 和 host 拼接构成。

search 和 searchParams

基本

?search=a 中 query 以第一个?最先至行尾或#完毕。用于向后端通报一些数据，数据运用 & 举行分开，值运用 = 分开。经由过程一段代码来明白一下：

const query = 'id=1&sort=asc&hello=world';
// 对 & 支解获得数据对
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 最基本的数据对的组合体式格局，固然开首的四种 数组 的表达体式格局须要举行别的的处置惩罚，无外乎就是对 key 的网络 和 value 的推断。不过这部份基本上后端的框架都帮我们处置惩罚好了，前端也能够运用 qs、query-string、qss 等库来完成。

题外话：这几个库代码都挺少的，值得一读说不定有新收成。

加号与空格

天天运用的 百度 和 谷歌 中不知道人人有无重要到这几个细节：

• 输入 https://www.baidu.com/s?wd=小二+pushmetop 搜刮框中涌现的是小二 pushmetop，地点栏中url地点的 + 奇异的变成了 空格。
• 输入 https://www.baidu.com/s?wd=小二 pushmetop 搜刮框中涌现的是小二 pushmetop，地点栏中url地点的 空格 的变成 %20。
• 输入 https://www.baidu.com/s?wd=小二%2Bpushmetop 搜刮框中涌现的是小二+pushmetop，地点栏中url地点的 %2B 的变成 +。

详细缘由能够检察 维基百科 关于 保存字符的百分号编码 。

URL 编码

在 掘金 等网站点击链接都邑疾速的闪现相似 http://www.pushmetop.com?redirect=xxxxx 的 url地点，会发明 redirect 对应的重定向地点会是一堆夹带 % 的乱码这是为何呢？

让我们假定须要跳转的链接是 www.test.com?hello=world&id=1,把全部链接拼接起来则为：

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

依据一最先的定义 剖析值 和 预期值 完整差别了：

剖析值

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

预期值

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

为了处理这个题目便诞生了 URL编码 来处理题目：

• encodeURIComponent() 和 decodeURIComponent() 引荐运用。
• encodeURI() 和 decodeURI() 对照前者不会对 "; / ? : @ & = + $ , #" 这些字符编码。
• 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

#hash 中 fragment 以 # 为最先 行尾 为完毕。在 回到顶部 中有提到过应用hash锚点来举行跳转，假如人人注重视察的话会发明 hash 的转变不会引发页面的革新。

在 Angular.js、Vue Router 等库中，会应用在 html5 中供应了 history 的一系列操纵，来协助我们不革新页面治理 url。但是在一些旧的浏览器上并不兼容时，会应用 hash 不会主动触发浏览器 reload 的特征来修正 location.hash 来治理路由。 固然 hash 的别的一个特点是能够被保存为书签，也是一大长处。

hash 的小妙用也能够像 query 那样应用 & 和 = 来存取数据，固然你也能够定制属于你的划定规矩。

href 和 pathname

href 为全部 url地点。而 pathname 属性包含 URL 的全部途径部份。它跟在 host （包含 port）背面，排在 query 或 hash 构成部份的前面且被 ASCII 问号（?）或哈希字符（#）分开。

username 和 password

username 和 password 在一样平常运用中很罕用，它们能够合称为 auth。该字符串跟在 protocol 和双斜杠（假如有）的背面，排在 host 部份的前面且被一个 ASCII 的 at 标记（@）分开：

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

末端

原本只是想议论 hash 和 search ，效果全都过一遍，本日就辛劳人人了。

一同生长

在疑心的城市里总少不了并肩偕行的
同伴 让我们一同生长。

• 假如您想让更多人看到文章能够点个 点赞。
• 假如您想鼓励小二能够到 Github 给个 小星星。
• 假如您想与小二更多交换增加微信 m353839115。

本文原稿来自
PushMeTop