Прекратите писать строки URL-адресов, подверженных ошибкам, и используйте объект JavaScript для управления URL-адресами в коде.

Вы недавно писали эту строчку кода?

const url = 'http://example.com/movies'; 
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data));

Скорее всего, если вы профессиональный веб-разработчик на любом этапе своей карьеры, то да, вы все время будете писать подобные вызовы API. Для простого примера, подобного приведенному выше, где URL-адрес на 100% статичен, вы можете обойтись простой строкой для определения своего URL-адреса. Но когда такое случается в реальной жизни 😄? Но что происходит, когда вам нужно выполнить более сложную настройку строки URL-адреса, как в примере ниже?

В приведенном выше примере все становится немного сложнее, и ручной характер приведенного выше кода начинает становиться подверженным ошибкам.
В написанном мной коде пробелы не кодируются в параметре запроса,
и не являются специальными символами. Если кто-то передаст параметр с пробелом или, что еще хуже, специальный символ, метод сломается. Приведенный выше код будет очень хрупким.

Объект URL

Введите объект URL. Как и в случае с большинством API-интерфейсов браузера, вам нужно немного предварительно изучить, как использовать этот объект, но его использование будет иметь долгосрочные преимущества для качества вашего кода.

Вы создаете объект URL-адреса, используя полностью определенную строку URL-адреса, например:

let url = new URL(‘http://example.com/movies’);

А затем получите доступ к множеству различных методов, которые помогут вам надежно управлять им. Если вам нужно использовать URL-адрес для выполнения запроса на выборку, вы можете просто вызвать его так fetch(url), и он вернет свое свойство href при доступе (в приведенном выше примере это будет просто «http://example.com/movies».

Давайте перепишем приведенный выше код с помощью объекта URL.

Код намного проще, и требуется гораздо меньше ручных усилий. Помимо очевидных улучшений в удобочитаемости и размере кода, давайте посмотрим на преимущества использования объекта URL.

Параметр

В приведенном выше примере расположение параметров обрабатывается за нас объектом. Нам не нужна какая-либо логика, чтобы переставить компоненты URL-адреса, чтобы они соответствовали друг другу (например, добавляя строки «?» И «&»). Это небольшой объем работы, но еще один способ повысить надежность кода.

Кодирование

Когда дело доходит до кодирования URL-адреса, объект URL-адреса автоматически применяет кодирование URL-адреса автоматически в соответствии с правилами, изложенными в RFC3986. Эта кодировка применяется к URL-адресу, а также к любым параметрам запроса, применяемым после него.

Аксессоры

Когда дело доходит до ЧТЕНИЯ URL-адреса, чего мы не делали в предыдущем примере, объект также делает вещи намного чище. Рассмотрим следующую ситуацию:

Этот код можно записать в одну строку с помощью следующего метода объекта URL

WindowUrl.searchParams.get(“ director”); //

Если вы используете в своем приложении хеши или хеш-маршрутизацию, не бойтесь. У объекта есть методы для его обработки, и вы можете распечатать все содержимое объекта URL как JSON с помощью метода toJSON(), если вам по какой-либо причине необходимо отправить информацию о просмотре обратно на сервер (особенно для отслеживания рекламы). .

Спасибо за чтение и удачного кодирования.

~ Алекс Зито-Вольф

Источники:



URL - веб-API | MDN
Интерфейс используется для анализа, построения, нормализации и кодирования URL-адресов. Он работает, предоставляя свойства, которые позволяют… developer.mozilla.org



Больше контента на plainenglish.io