Логотип Хекслета

JS: Синхронная асинхронность

Теория: URL

При работе с http возникает потребность в библиотеках, позволяющих манипулировать частями адресов, разбирать их, а также собирать обратно. Node.js предоставляет такие модули из коробки.

Url

Это модуль, основной задачей которого является парсинг строчки адреса для извлечения составных частей.

import url from 'url'

const { URL } = url

const parsedURL = new URL('http://user:pass@host.com:8080/p/a/t/h?query=string#hash')
// URL {
//   href: 'http://user:pass@host.com:8080/p/a/t/h?query=string#hash',
//   origin: 'http://host.com:8080',
//   protocol: 'http:',
//   username: 'user',
//   password: 'pass',
//   host: 'host.com:8080',
//   hostname: 'host.com',
//   port: '8080',
//   pathname: '/p/a/t/h',
//   search: '?query=string',
//   searchParams: URLSearchParams { 'query' => 'string' },
//   hash: '#hash'
// }

То же самое можно визуализировать:

┌─────────────────────────────────────────────────────────────────────────────┐ │ href │ ├──────────┬┬───────────┬─────────────────┬───────────────────────────┬───────┤ │ protocol ││ auth │ host │ path │ hash │ │ ││ ├──────────┬──────┼──────────┬────────────────┤ │ │ ││ │ hostname │ port │ pathname │ search │ │ │ ││ │ │ │ ├─┬──────────────┤ │ │ ││ │ │ │ │ │ query │ │ " http: // user:pass @ host.com : 8080 /p/a/t/h ? query=string #hash " │ ││ │ │ │ │ │ │ │ └──────────┴┴───────────┴──────────┴──────┴──────────┴─┴──────────────┴───────┘ (all spaces in the "" line should be ignored -- they're purely for formatting)

Как видно, этот модуль дал нам возможность извлечь query params из адреса, но в виде строки. Дальше, как вы уже догадались, нам понадобится еще один модуль - querystring.

Querystring

Он также входит в поставку Node.js и работает очень просто:

import querystring from 'querystring'

const str = 'w=%D1%8D%D1%80%D0%BB%D0%B0%D0%BD%D0%B3&foo=bar'

querystring.parse(str)
// { w: 'эрланг', foo: 'bar' }

querystring.stringify({ w: 'эрланг', foo: 'bar' })
// w=%D1%8D%D1%80%D0%BB%D0%B0%D0%BD%D0%B3&foo=bar

Здесь необходимо сделать пояснение. Спецификация http разрешает использовать в адресах только те символы, которые входят в ASCII character-set. Возникает вопрос: как быть, если у нас есть другие символы? А для этого применяется специальное кодирование, называемое url encoding. Например, слово скрипт будет закодировано в строку: %D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82.

Модуль querystring делает кодирование/декодирование автоматически, это видно в примере выше. Но если вам вдруг понадобилось делать это руками, то js спешит на помощь:

encodeURI('эрланг')
// %D1%8D%D1%80%D0%BB%D0%B0%D0%BD%D0%B3

decodeURI('%D1%8D%D1%80%D0%BB%D0%B0%D0%BD%D0%B3')
// эрланг

А теперь собираем все вместе:

import querystring from 'querystring'

const url = 'https://hexlet.io/?q=%D1%8D%D1%80%D0%BB%D0%B0%D0%BD%D0%B3'
const { search } = new URL(url)
const qs = querystring.parse(search)
console.log(qs['?q']) // => 'эрланг'

Кроме ручного превращения строки в объект через querystring можно воспользоваться классом URLSearchParams:

const url = 'https://hexlet.io/?q=%D1%8D%D1%80%D0%BB%D0%B0%D0%BD%D0%B3'
const { searchParams } = new URL(url)
const query = Object.fromEntries(searchParams) // превращение в объект
console.log(query) // => { q: 'эрланг' }

Обратная задача – конструирование адреса выполняется через создание объекта URL и его наполнение:

const url = new URL('/my', 'https://hexlet.io')
url.searchParams.set('page', 5)
console.log(url.toString()) // https://hexlet.io/my?page=5

Для более полного понимания работы этих объектов и методов нужно смотреть в документацию и экспериментировать.

Навигация
Теория
Тесты