Реактивное программирование — это парадигма асинхронного программирования, которая связана с потоком данных и распространением изменений.
RxJS (Reactive Extensions for JavaScript) — это библиотека для реактивного программирования с использованием наблюдаемых, которые упрощает составление асинхронного кода или кода на основе обратного вызова (RxJS Docs).
RxJS предоставляет реализацию типа Observable, который необходим до тех пор, пока тип не станет частью языка и пока браузеры не поддержат его . Библиотека также предоставляет служебные функции для создания наблюдаемых объектов и работы с ними. Эти служебные функции могут использоваться для:
- преобразования существующего кода для асинхронных операций в наблюдаемые
- итерации значений в потоке
- Сопоставление значений с разными типами
- Фильтрация потоков
- Составление нескольких потоков
Функции создания наблюдаемых.
RxJS предлагает ряд функций, которые можно использовать для создания новых наблюдаемых объектов. Эти функции могут упростить процесс создания наблюдаемых из таких вещей, как события, таймеры, обещания и т. Д. Например:
Создание наблюдаемого из обещания
Код TypeScript:
import {from} from 'rxjs';//Создаем Observable из обещанияconst data = from (fetch ('/api/endpoint'));//Подпишемся, чтобы начать прослушивание async resultdata.subscribe ({next (response) {console.log (response);}, error (err) {console.error ('Error:' + err);}, complete () {console.log (' Завершено ');}});
Живая демонстрация:
Это просто фрагмент кода, объясняющий конкретная концепция и может не иметь вывода
См. Pen observable_from_promise от w3resource (@ w3resource) на CodePen.
Create наблюдаемое из счетчика
Код TypeScript:
import {interval} from ' rxjs ';//Создаем Observable, который будет публиковать значение с интерваломconst secondsCounter = interval (1000);//Подпишитесь, чтобы начать публикацию значенийsecondsCounter.subscr ibe (n => console.log (`С момента подписки прошло $ {n} секунд!`));
Живая демонстрация:
Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода
См. Pen observable_from_counter от w3resource (@ w3resource) на CodePen.
Создание наблюдаемого из события
Код TypeScript:
import {fromEvent} from 'rxjs'; const el = document.getElementById ('my-element');//Создаем Observable, который будет публиковать движения мыши const mouseMoves = fromEvent (el, ' mousemove ');//Подпишемся, чтобы начать прослушивание событий перемещения мыши const subscription = mouseMoves.subscribe ((evt: MouseEvent) => {//Регистрируем координаты движений мыши console.log (`Coords: $ {evt.clientX} X $ {evt. clientY} `); //Когда указатель мыши находится над левым верхом экрана,//отменяем подписку, чтобы перестать прислушиваться к движениям мыши if (evt.clientX
Live Demo:
Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода
См. Pen observable_from_event от w3resource (@ w3resource) на CodePen .
Наблюдаемый из запроса Ajax
Код TypeScript:
import {ajax} from 'rxjs/ajax';//Создаем Observable, который будет создавать запрос AJAXconst apiData = ajax ('/api/data');// Подпишитесь, чтобы создать requestapiData.subscribe (res => console.log (res.status, res.response));
Live Demo:
Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода
См. Pen observable_from_AjaxRequest от w3resource (@ w3resource) на CodePen.
Операторы
Операторы — это функции s, которые построены на основе наблюдаемых объектов, чтобы позволить сложные манипуляции с коллекциями. Например, RxJS определяет такие операторы, как map (), filter (), concat () и flatMap ().
Операторы принимают параметры конфигурации и возвращают функцию, которая принимает наблюдаемый источник. При выполнении этой возвращенной функции оператор наблюдает за испускаемыми значениями исходного наблюдаемого, преобразует их и возвращает новый наблюдаемый из этих преобразованных значений. Вот простой пример:
Оператор карты
Код TypeScript:
import {map} from 'rxjs/operations'; const nums = of (1, 2, 3); const squareValues = map ((val: number) => val * val) ; const squaredNums = squareValues (nums); squaredNums.subscribe (x => console.log (x));//Журналы//1//4//9
Живая демонстрация:
Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода
См. Pen map_Operator от w3resource (@ w3resource) на CodePen.
Вы можете использовать каналы для связывания операторов вместе. Каналы позволяют объединить несколько функций в одну. Функция pipe () принимает в качестве аргументов функции, которые вы хотите объединить, и возвращает новую функцию, которая при выполнении последовательно запускает скомпонованные функции.
Набор операторов, применяемых к наблюдаемому объекту. это рецепт, то есть набор инструкций для получения интересующих вас значений. Сам по себе рецепт ничего не делает. Вам нужно вызвать subscribe (), чтобы получить результат по рецепту.
В качестве примера рассмотрим функцию канала ниже:
Код TypeScript :
import {filter, map} from 'rxjs/operations'; const nums = of (1, 2, 3, 4, 5);// Создайте функцию, которая принимает Observable. const squareOddVals = pipe (filter ((n: number) => n% 2! == 0), map (n => n * n));//Создаем Observable, который будет запускать функции фильтра и сопоставления const squareOdd = squareOddVals (nums);//Подпишемся на запуск комбинированных функций sqquareOdd.subscribe (x => console.log (x));
Live Demo:
Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода
См. Pen Observable_pipefunctions от w3resource (@ w3resource) на CodePen.
Этот код выше можно сделать короче, потому что функция конвейера также является методом в RxJS Observable, это показано ниже:
Код TypeScript:
import {filter, map} из 'rxjs/operations'; const squareOdd = of (1, 2, 3, 4, 5) .pipe (filter (n => n% 2! == 0), map (n => n * n));//Подпишитесь, чтобы получить значениеquareOdd.subscribe (x => console.log (x));
Живая демонстрация:
Это просто фрагмент кода, объясняющий cular и может не иметь вывода
См. функцию Pen mapped_pipe от w3resource (@ w3resource) на CodePen.
Ошибка обработка
В дополнение к обработчику error (), который вы предоставляете при подписке, RxJS предоставляет оператор catchError, который позволяет вам обрабатывать известные ошибки в наблюдаемом рецепте.
Например, предположим, что у вас есть наблюдаемый объект, который делает запрос API и сопоставляется с ответом от сервера. Если сервер возвращает ошибку или значение не существует, выдается ошибка. Если вы поймаете эту ошибку и зададите значение по умолчанию, ваш поток продолжит обработку значений, а не выдаст ошибку.
Пример использования оператора catchError для этого показан ниже:
Код TypeScript:
import {ajax} from 'rxjs/ajax'; import {map, catchError} from ' rxjs/operator ';//Вернуть "ответ" от API. Если произошла ошибка,//вернем пустой массив. Const apiData = ajax ('/api/data'). Pipe (map (res => {if (! Res.response) {throw new Error ('Value expected!') );} return res.response;}), catchError (err => of ([]))); apiData.subscribe ({next (x) {console.log ('data:', x);}, error ( err) {console.log ('ошибки уже обнаружены ... не запускаются');}});
Живая демонстрация:
Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода
См. Pen catchError_Operator от w3resource (@ w3resource) на CodePen.
Retry failed observable
Если оператор catchError обеспечивает простой путь восстановления, оператор retry позволяет вам повторить неудачный request.
Используйте оператор повтора перед оператором catchError. Он повторно подписывается на наблюдаемый исходный источник, который затем может повторно запустить полную последовательность действий, которые привели к ошибке.. Если это включает HTTP-запрос, он повторит этот HTTP-запрос.
Следующий пример преобразует предыдущий пример, чтобы повторить запрос до обнаружения ошибки:
Код TypeScript:
import {ajax} from 'rxjs/ajax'; import {map, retry, catchError} из 'rxjs/operator'; const apiData = ajax ('/api/data'). pipe (retry (3),//Повторите попытку до 3 раз перед ошибкой map (res => {if (! res.response) {throw new Error ('Ожидаемое значение! ');} return res.response;}), catchError (err => of ([]))); apiData.subscribe ({next (x) {console.log (' data: ', x);}, error (err) {console.log ('ошибки уже обнаружены ... не запускаются');}});
Живая демонстрация:
Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода
См. Pen retry_operator от w3resource (@ w3resource) на CodePen.
