30 секунд в день ⏱ URL Blast

JavaScript
30 секунд в день ⏱ URL Blast

Введение

Структура URL, состав, запрос, хэш, ошибка передачи массива axios, HTTP-запрос

Сопровождается звуком уведомления о сообщениях WeChat.小四отправьте кусок кода, говорящий不知道为什么请求不到页面数据:

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Точно так же почему?

Напомним, что развитие часто видитlocalhost:8080, здесь отображается номер порта8080Однако, когда я использую его для посещения некоторых веб-сайтов, я не ввожу номер порта. Это потому чтоurl地址Номер порта по умолчанию80, поэтому, если вы внимательно посмотрите, вы найдете вышеportЗначение пустое.

а такжеhostа такжеhostnameОтличие в том, что естьportкогдаhostбудет содержать номер порта, аhostnameне будет содержать.

протокол и происхождение

protocolЯ имею в виду协议Наиболее распространенными являютсяhttpа такжеhttps, конечно, теперь браузер автоматически добавит его вам, когда вы уже не будете входить в протокол, но вURL()Если вы не принесете соглашение, вы получите сообщение об ошибке.originтогдаprotocelа такжеhostСплайсинговый состав.

поиск и параметры поиска

Основание

?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, адрес в адресной строке+чудесным образом стал空格.
  • войтиhttps://www.baidu.com/s?wd=小二 pushmetopТо, что появляется в поле поиска,小二 pushmetop, адрес в адресной строке空格становится%20.
  • войтиhttps://www.baidu.com/s?wd=小二%2BpushmetopТо, что появляется в поле поиска,小二+pushmetop, адрес в адресной строке%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изменения не вызовут обновления страницы.

существуетAngular.js,Vue RouterВ других библиотеках он будет использоваться вhtml5предоставлено вhistoryСерия операций, которые помогут нам не обновлять страницу управленияurl. Однако, если он несовместим с некоторыми старыми браузерами, он будет использоватьhashНе активирует браузерreloadфункции для измененияlocation.hashдля управления маршрутизацией. КонечноhashЕще одна особенность заключается в том, что его можно сохранить в качестве закладок.

hashМаленькое волшебство также может быть похоже наqueryиспользовать так&а также=Конечно, для доступа к данным вы также можете настроить свои собственные правила.

href и путь

hrefв целомurl地址. а такжеpathnameСвойство содержит всю часть пути URL-адреса. следуетhost(включатьport), с последующимqueryилиhashкомпонентам предшествует вопросительный знак ASCII (?) или символ решетки (#).

имя пользователя и пароль

usernameа такжеpasswordРедко используемые в повседневном использовании, их можно в совокупности назватьauth. За строкой следуетprotocolи двойная косая черта (если есть) послеhostразделам предшествует знак ASCII at (@):

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

конец

я просто хотел обсудитьhashа такжеsearch, результат налицо, сегодня тяжелая работа для всех.

Расти вместе

В запутанном городе неизбежно идти бок о бок伙伴Давайте расти вместе.

  • Если вы хотите, чтобы статью увидело больше людей, нажмите点赞.
  • Если вы хотите мотивировать второго ребенка, вы можете перейти кGithubдать小星星.
  • Если вы хотите больше общаться с Xiaoer, добавьте WeChatm353839115.

微信公众号

Оригинал статьи изPushMeTop

Категории