Fetch

JavaScript может отправлять сетевые запросы на сервер и подгружать новую информацию по мере необходимости.

Например, мы можем использовать сетевой запрос, чтобы:

 - Отправить заказ
 - Загрузить информацию о пользователе
 - Запросить последние обновления с сервера
 - …и т.п.

Метод fetch() — современный и очень мощный, поэтому начнём с него. Он не поддерживается старыми (можно использовать полифил), но поддерживается всеми современными браузерами.

Базовый синтаксис:

 - url – URL для отправки запроса.
 - options – дополнительные параметры: метод, заголовки и так далее.

Без options это простой GET-запрос, скачивающий содержимое по адресу url.

#fetch #сетевые_запросы

Прокрутка

Встроенное свойство «length» содержит количество параметров функции в её объявлении.

Событие прокрутки scroll позволяет реагировать на прокрутку страницы или элемента. 
Есть много хороших вещей, которые при этом можно сделать.

Например:

 - Показать/скрыть дополнительные элементы управления или информацию, основываясь на том, в какой части документа находится пользователь.
 - Подгрузить данные, когда пользователь прокручивает страницу вниз до конца.

Вот картинке выше функция для отображения текущей прокрутки.

#прокрутка #интерфейсные_события

Глобальный catch

Давайте представим, что произошла фатальная ошибка (программная или что-то ещё ужасное) снаружи try..catch, и скрипт упал.

Существует ли способ отреагировать на такие ситуации? 
Можно залогировать ошибку, показать что-то пользователю (обычно они не видят сообщение об ошибке) и т.д.

В браузере мы можем присвоить функцию специальному свойству window.onerror, которая будет вызвана в случае необработанной ошибки.

Синтаксис на картинке выше.

 - message
Сообщение об ошибке.
 - url
URL скрипта, в котором произошла ошибка.
 - line, col
Номера строки и столбца, в которых произошла ошибка.
 - error
Объект ошибки.

Роль глобального обработчика window.onerror обычно заключается не в восстановлении выполнения скрипта – это скорее всего невозможно в случае программной ошибки, а в отправке сообщения об ошибке разработчикам.

#глобальный_catch #обработка_ошибок

Что будет выведено в консоль?
#middle #arrays

FormData

FormData - это объект, представляющий данные HTML формы.

Если передать в конструктор элемент HTML-формы form, то создаваемый объект автоматически прочитает из неё поля.

Его особенность заключается в том, что методы для работы с сетью, например fetch, позволяют указать объект FormData в свойстве тела запроса body.

Он будет соответствующим образом закодирован и отправлен с заголовком Content-Type: form/multipart.

То есть, для сервера это выглядит как обычная отправка формы.

P.S. на картинке выше пример отправки данных простой HTML формы с помощью fetch.

#formData #сетевые_запросы

WebSocket

Протокол WebSocket, описанный в спецификации RFC 6455, обеспечивает возможность обмена данными между браузером и сервером через постоянное соединение. Данные передаются по нему в обоих направлениях в виде «пакетов», без разрыва соединения и дополнительных HTTP-запросов.

WebSocket особенно хорош для сервисов, которые нуждаются в постоянном обмене данными, например онлайн игры, торговые площадки, работающие в реальном времени, и т.д.

В JavaScript WebSocket генерирует 4 события, с помощью которых и строится всё взаимодействие:
- open – соединение установлено;
- message – получены данные;
- error – ошибка;
- close – соединение закрыто.

#WebSocket #сетевые_запросы

Server Sent Events

Спецификация Server-Sent Events описывает встроенный класс EventSource, который позволяет поддерживать соединение с сервером и получать от него события.
Как и в случае с WebSocket, соединение постоянно.

Работа с потоком данных:
- Текст сообщения указывается после data:, пробел после двоеточия необязателен;
- Сообщения разделяются двойным переносом строки \n\n;
- Чтобы разделить сообщение на несколько строк, мы можем отправить несколько data: подряд (третье сообщение).

Про сравнение SSE с WS.
Протокол SSE одновременно похож на WebSocket, но также сильно отличается. Например, данные отправляются лишь с сервера на клиент и могут иметь только текстовой формат. Однако это не делает SSE ненужным, напротив, у него своя ниша.
Основное преимущество в простоте использования, что делает SSE более привлекательным для проектов, где вся мощь WS абсолютно не требуется.

#sse #сетевые_запросы

Long Polling (длинные опросы)

Длинные опросы – это самый простой способ поддерживать постоянное соединение с сервером, не используя при этом никаких специфических протоколов (типа WebSocket или Server Sent Events).
Его очень легко реализовать, и он хорошо подходит для многих задач.

Как это происходит:
- Запрос отправляется на сервер;
- Сервер не закрывает соединение, пока у него не возникнет сообщение для отсылки;
- Когда появляется сообщение – сервер отвечает на запрос, посылая его;
- Браузер немедленно делает новый запрос.

P.S. на картинке примерный код клиентской функции subscribe, которая реализует длинные опросы.

#LongPolling #сетевые_запросы

XMLHttpRequest

XMLHttpRequest – это встроенный в браузер объект, который даёт возможность делать HTTP-запросы к серверу без перезагрузки страницы.

Несмотря на наличие слова «XML» в названии, XMLHttpRequest может работать с любыми данными, а не только с XML. Мы можем загружать/скачивать файлы, отслеживать прогресс и многое другое.

Алгоритм работы:
1) Создать XMLHttpRequest;
2) Инициализировать его;
3) Послать запрос;
4) Слушать события на xhr, чтобы получить ответ.

P.S. На сегодняшний день не обязательно использовать XMLHttpRequest, так как существует другой, более современный метод fetch.

#xhr #сетевые_запросы

Опциональная цепочка '?.'

Опциональная цепочка ?. — это безопасный способ доступа к свойствам вложенных объектов, даже если какое-либо из промежуточных свойств не существует.

Опциональная цепочка ?. останавливает вычисление и возвращает undefined, если часть перед ?. имеет значение undefined или null.

P.S. Эта возможность была добавлена в язык недавно. В старых браузерах может понадобиться полифил.

#опциональная_цепочка #основы

Копирование объектов

Одним из фундаментальных отличий объектов от примитивных типов данных является то, что они хранятся и копируются «по ссылке».

Примитивные типы: строки, числа, логические значения – присваиваются и копируются «по значению».

Переменная хранит не сам объект, а его «адрес в памяти», другими словами «ссылку» на него.

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

#object #основы

Наследование классов

Наследование extends пришло в JS с ES6 синтаксисом.

Ключевое слово extends работает, используя прототипы. Оно устанавливает Rabbit.prototype.[[Prototype]] в Animal.prototype. Так что если метод не найден в Rabbit.prototype, JavaScript берёт его из Animal.prototype.

#наследование #классы

Решайте практические тесты из собеседований на нашем втором канале @tests_js

Экспорт и импорт

С помощью ключевых слов import и export мы можем соответственно импортировать и экспортировать переменные, функции, классы и другие сущности языка.

На картинке показан пример экспорта и импорта простых функций из файла say.js в main.js.

#export #import #модули

Динамические импорты

Инструкции экспорта и импорта, которые мы рассматривали в предыдущем посте, называются «статическими». Синтаксис у них весьма простой и строгий.

Во-первых, мы не можем динамически задавать никакие из параметров import.
Путь к модулю должен быть строковым примитивом и не может быть вызовом функции. Вот так работать не будет:

Во-вторых, мы не можем делать импорт в зависимости от условий или в процессе выполнения.

Все эти проблемы решает выражение import(module).

Выражение import()

Выражение import(module) загружает модуль и возвращает промис, результатом которого становится объект модуля, содержащий все его экспорты.
Использовать его мы можем динамически в любом месте кода, как показано на скрине выше.

#динамический_импорт #модули

Eval: выполнение строки кода

Встроенная функция eval позволяет выполнять строку кода.

Синтаксис:
let result = eval(code);

Строка кода может быть большой, содержать переводы строк, объявления функций, переменные и т.п.
Результатом eval будет результат выполнения последней инструкции.

Использование

В современной разработке на JavaScript eval используется весьма редко. Есть даже известное выражение – «eval is evil» («eval – это зло»).

Причина такого отношения достаточно проста: давным-давно JavaScript был не очень развитым языком, и многие вещи можно было сделать только с помощью eval. Но та эпоха закончилась более десяти лет назад.

Промисификация

Промисификация – это длинное слово для простого преобразования. Мы берём функцию, которая принимает колбэк и меняем её, чтобы она вместо этого возвращала промис.

Такие преобразования часто необходимы в реальной жизни, так как многие функции и библиотеки основаны на колбэках, а использование промисов более удобно, поэтому есть смысл «промисифицировать» их.

Например, у нас есть loadScript(src, callback) (см. левую часть картинки)

Давайте промисифицируем её. Новая функция loadScriptPromise(src) будет делать то же самое, но будет принимать только src (не callback) и возвращать промис (см. правую часть картинки)

#promise #продвинутый

Callbacks (Колбэки)

Колбэк функция - это такая функция, которая вызывается после выполнения какой-то асинхронности.

В данном примере описана функция динамической подгрузки скриптов с колбеком, после загрузки. Функция callback выполнится, когда скрипт будет полностью загружен на странице.

Колбэки используются повсеместно, не только в JavaScript.

#callback #колбэк #продвинутый

Микрозадачи

Асинхронные задачи требуют правильного управления. Для этого стандарт предусматривает внутреннюю очередь PromiseJobs, более известную как «очередь микрозадач (microtask queue)» (термин V8).

Как сказано в спецификации:
- Очередь определяется как первым-пришёл-первым-ушёл (FIFO): задачи, попавшие в очередь первыми, выполняются тоже первыми.
- Выполнение задачи происходит только в том случае, если ничего больше не запущено.

Или, проще говоря, когда промис выполнен, его обработчики .then/catch/finally попадают в очередь. Они пока не выполняются. Движок JavaScript берёт задачу из очереди и выполняет её, когда он освободится от выполнения текущего кода.

Вот почему сообщение «код выполнен» в примере выше будет показано первым.

#микрозадачи #промисы

Цепочка промисов

Идея состоит в том, что результат первого промиса передаётся по цепочке обработчиков .then.

Поток выполнения такой:
- Начальный промис успешно выполняется через 1 секунду (*),
- Затем вызывается обработчик в .then (**).
- Возвращаемое им значение передаётся дальше в следующий обработчик .then (***)
- …и так далее.

В итоге результат передаётся по цепочке обработчиков, и мы видим несколько alert подряд, которые выводят: 1 → 2 → 4.

#промисы #цепочка_промисов