Возобновляемая загрузка файлов с помощью fetch Здравствуйте! В этом уроке разберем, как возобновить загрузку файлов при отправке на сервер при помощи Fetch . Ведь при помощи fetch достаточно просто отправить файл на сервер. Но как возобновить загрузку, если соединение внезапно прервалось? Для этого нет готовой настройки, но у нас есть все средства, чтобы решить эту задачу. Возобновляемая загрузка должна сопровождаться индикацией прогресса, ведь, скорее всего, нам нужно отправлять большие файлы. Поскольку м...

Класс URL Здравствуйте! В этом уроке разберем встроенный класс URL, который предоставляет удобный интерфейс для создания и разбора URL-адресов. Нет сетевых методов, которые требуют именно объект URL, обычные строки вполне подходят. Так что, технически, мы не обязаны использовать URL. Но иногда он может быть весьма полезным. Читать далее ...

Fetch API полное руководство Здравствуйте! В этом уроке мы с вами рассмотрим дополнительные возможности Fetch API. Поскольку мы уже много знаем про fetch . Давайте рассмотрим оставшуюся часть API, чтобы охватить все возможности. Хочу заметить, что большинство этих возможностей используются редко. Тем не менее, полезно знать, что вообще может fetch, чтобы, когда появится необходимость, вернуться и прочитать конкретные детали. Нижеследующий список - это все возможные опции для fetch с соответствующими значен...

Fetch: как сделать запрос на другой сайт Здравствуйте! В этом уроке рассмотрим, как можно с помощью метода Fetch делать запросы на другие сайты и какие проблемы при этом могут возникнуть. Если вы сделаете запрос fetch на другой сайт, он, вероятно всего, завершится неудачей. Например, давайте попробуем запросить http :// example . com : try { await fetch' http :// example . com ); } catch(err) { alert(err); // Failed to fetch } Вызов fetch не удался, как впрочем и ожидалось. Ключевым понятием является источ...

Fetch: прерывание запроса Здравствуйте! В этом уроке рассмотрим, как можно прервать запрос с помощью метода Fetch . Как вы знаете, данный метод возвращает промис . А в JavaScript в целом нет понятия <отмены> промиса. Как же можно прервать запрос fetch? Для таких целей существует специальный встроенный объект AbortController, который можно использовать для отмены не только fetch, но и других асинхронных задач. Читать далее ...

Fetch: ход загрузки Здравствуйте! В этом уроке в продолжении темы метода fetch я расскажу о ходе загрузки данных. Ведь fetch позволяет отслеживать процесс получения данных. Заметим, на данный момент в fetch нет способа отслеживать процесс отправки. Для этого используйте XMLHttpRequest Для отслеживания хода загрузки данных с сервера, можно использовать свойство response.body. Это так называемый ReadableStream <поток для чтения) - особый объект, который предоставляет тело ответа по частям, по мере поступлени...

FormData: отправка данных HTML-формы Здравствуйте! В этом уроке речь пойдёт об отправке HTML-форм: с файлами и без, с дополнительными полями. И объекты FormData помогут нам с этим. Как вы, наверняка, догадались из его названия, это объект, представляющий данные HTML формы . Конструктор: let formData = new FormData[form); Если передать в конструктор элемент HTML-формы form, то создаваемый объект автоматически прочитает из неё все поля. Его особенность заключается в том, что методы для работы с сетью, наприм...

Метод Fetch) получение данных с сервера Здравствуйте! В этом уроке я расскажу о методе Fetch, как о современном способе получения данных с сервера без перезагрузки страницы, кратко я уже писал о нем здесь . В этой же статье дам более расширенный материал. JavaScript может отправлять сетевые запросы на сервер и подгружать новую информацию по мере необходимости. Например, можно использовать сетевой запрос, чтобы: Отправить заказ, Загрузить информацию о пользователе, Запросить последние обновления с сервера. ...

Цикл событий на странице: микрозадачи и макрозадачи Здравствуйте! В этом уроке поговорим о событийном цикле на странице. Ведь поток выполнения в браузере, равно как и в Node.js, основан на событийном цикле. Понимание его работы очень важно для оптимизаций, а иногда для правильной архитектуры. В уроке мы разберем теоретические аспекты, а потом уже перейдем к практике. Читать далее ...

MutationObserver: наблюдатель за изменениями DOM-элемнета Здравствуйте! В этом уроке рассмотрим объект MutationObserver, который представляет из себя встроенный объект, наблюдающий за DOM-элементом и запускающий колбэк функцию в случае изменений. Бывает очень полезно обновить состояние компонента по наступлению каого-то события. Сначала давайте познакомимся с синтаксисом, а затем и разберём примеры использования. Читать далее ...