Угловые RXJS подробно

Что такое наблюдаемый, наблюдатель и подписание в RXJS 6

RXJS использует концепцию наблюдаемых для обработки и работы с асинхронным и кодом на основе событий.

Асинхронное слово происходит от асинхронного. В компьютерном программировании, вот определение асинхронного от Википедия :

Асинхронность, в компьютерном программировании, относится к возникновению событий, независимых от основного потока программ и способами решения таких событий. Это могут быть «вне» событий, таких как приход сигналов, или действия, вызванные программой, которая состоится одновременно с выполнением программы, без блокировки программы, чтобы дождаться результатов.

Прочитав это определение, вы, возможно, пришли к выводу, сколько асинхронии важно для компьютеров и программирования!

Давайте сделаем это просто!

Асинхронный код - это инверсия Синхронный код, который является оригинальным способом мышления о вашем коде, когда вы впервые представлены на программирование.

Ваш код синхронно, когда он работает в последовательностях I.E Инструкция по инструкции в порядке их появления в исходном коде.

Например, давайте рассмотрим этот простой код JavaScript:

const foo = "foo" //1
const bar = "bar" //2
const foobar = foo  +  bar //3
console.log(foobar) //4

Браузер запустит эту строку синхронного кода по линии от линии от 1 до 4, начиная с назначения Foo и бар Переменные, объединяющие их и отображение Foobar переменная в консоли.

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

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

Например, следующий асинхронный код будет отображаться Вы нажали кнопку! Когда пользователь нажимает кнопку, идентифицированную по MyButton идентификатор:

document.getElementById('mybutton').addEventListener('click', () => {
  console.log("You clicked the button!")
})

Второй аргумент addeventListener () Метод - обратный вызов.

Вы также можете использовать обратные вызовы, чтобы обрабатывать асинхронные операции, которые не включают дому. Например, следующий код можно использовать для отправки запроса HTTP Post на веб-сервер:

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    xhr.status === 200 ? console.log(xhr.responseText) : console.error('error')
  }
}
xhr.open('POST', 'your.server.com')
xhr.send()

Вот как вы выполняете знаменитые звонки AJAX в JavaScript.

На самом деле, Ajax сама стоит за А Синхронный J avascript А ND Х ML.

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

Если вы когда-либо широко работали с обратными вызовами, вы заметите одну проблему с ними. Им трудно отслеживать!

Когда вы пишете сложные приложения, которые вы обычно заканчиваете запись вложенные обратные вызовы (обратные вызовы в обратных вызовах) с несколькими уровнями вложения. Это то, что известно как Обратный вызов Ад Отказ

Современный JavaScript представил другие подходы или абстракции для решения асинхронных операций (без использования слишком много обратных вызовов), таких как обещания и Async/ждут.

Обещания были введены в ES6 (JS 2015).

Async/await был введен в ES8 (JS 2017), и это на самом деле синтаксический сахар на вершине обещаний, который помогает разработчикам писать асинхронный код с обещаниями таким образом, что выглядит синхронно.

Но обещания на самом деле аналогичны обратным вызовам и имеют одинаковую проблему в гложении в некоторой степени.

Поскольку разработчики всегда ищут лучшие решения, у нас теперь есть наблюдаемые, которые используют наблюдатель Узор программного обеспечения.

Узор наблюдателя - это шаблон проектирования программного обеспечения, в котором объект, называемый объектом, поддерживает список его иждивенцев, называемых наблюдателями и автоматически уведомляется о любых изменениях состояния, обычно путем вызова одного из их методов. Узор наблюдателя Отказ

Наблюдаемые заметки реализованы в Реактивный эффект Проект, который имеет реализации на разных языках. RXJS - это реализация JavaScript.

Примечание : Наблюдаемые заметки реализованы во многих других библиотеках, таких как Дзен-наблюдаемый и xstream Но наблюдаемые в RXJS являются самыми популярными в JavaScript.

Наблюдаемые не являются встроенной особенностью JavaScript, но есть Предложение добавить их в Ecmascript.

Теперь, что наблюдаемая RXJS?

Заметное представляет собой сущность, которое излучает (или публикует) несколько значений данных (поток данных) со временем и асинхронно.

Это определение наблюдаемого от RXJS Docs.

Замечаемое представляет идею взысканной коллекции будущих ценностей или событий.

Наблюдатели и подписки

Есть также связанные концепции, с которыми вы будете работать при использовании наблюдаемых, которые являются Наблюдатели и Подписки Отказ

Наблюдатели также называют слушателями (или потребителями), поскольку они могут слушать или подписаться на получение наблюдаемых данных.

От документов RXJS:

Observer - это коллекция обратных вызовов, которые знают, как слушать значения, доставляемые наблюдаемыми.

Подписки являются объектами, которые возвращаются при подписании на наблюдаемый. Они содержат много методов, таких как Отписаться () Метод, который вы можете позвонить, чтобы отписаться от рецидива опубликованных значений от наблюдаемого.

Из официальных документов:

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

Что такое предмет в RXJS

А Тема Является ли особый тип наблюдаемого, что наблюдатели также могут подписаться на него, чтобы получить опубликованные значения, но с одним разницей: Значения многоцелевые для многих наблюдателей Отказ

Примечание : По умолчанию наблюдаемый RXJS - это одноактивное.

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

Примечание : Субъекты похожи на угловые события.

Поэтому при использовании субъектов вместо простого наблюдаемого, все подписанные наблюдатели получат одинаковые значения испускаемых данных.

Примечание : Субъекты также являются наблюдателями I.E Они также могут подписаться на другие наблюдаемые и слушать опубликованные данные.

Горячие и холодные наблюдаемые

В отличие от обычных наблюдаемых, предметы называются Горячий Отказ Горячих наблюдаемых начинает излучать события еще до того, как любой наблюдатель подписывается на него, что означает, что наблюдатели могут потерять предыдущие испускаемые значения, если они не подписываются в это время, когда холодный Наблюдаемые **** начинают излучать значения, когда по меньшей мере один наблюдатель подписан.

Примечание : Вы можете использовать AsoBServable () Способ преобразования предмета только для наблюдаемого.

Поведение RXJS и ReplaysUbject

RXJS предоставляет два других типа предметов: Поведение и Replaysubject Отказ

С нормальным предметом, наблюдателями, которые подписываются в конце позже, не получат значения данных, излучаемые до их подписок. Во многих ситуациях это не желаемое поведение, которое мы хотим реализовать. Это может быть решено, используя Поведение и Replaysubject Отказ

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

Поведение Работает как Replaysubject Но только повторно излучает последнее исходное значение.

Как создать наблюдаемые RXJS

Вы можете создать RXJS, наблюдаемые с помощью Наблюдаемый.Create () Метод, который принимает функцию с наблюдатель аргумент Затем вы можете подписаться на возвращенный наблюдаемый экземпляр.

Есть много других методов для создания наблюдаемых, кроме статического Создать () Метод:

• поднять () метод экземпляра, который создает новый наблюдаемый из экземпляра (источник), он вызывается,
• из ([]) Оператор, который создает наблюдаемый из одного значения. Увидим пример Далее,
• Интервал (интервал) Оператор, который создает наблюдаемый, который издает бесконечную последовательность чисел. Каждое число испускается с постоянным интервалом времени в секундах,
• Таймер () Оператор, который возвращает наблюдаемый, что после указанного количества времени выделяет номера в последовательности каждый указанный продолжительность,
• от () метод, который создает наблюдаемый из обещания или массива ценностей,
• Fromevent () Метод, который создает наблюдаемый из события DOM,
• ajax () Метод, который создает наблюдаемый, который отправляет запрос AJAX.

Мы увидим эти методы создания на примере позже.

Как подписаться на наблюдаемые RXJS

После создания Наблюдаемый , вы можете подписаться на него, используя Подписаться () Метод на экземпляре, который возвращает экземпляр Подписка Отказ

Простой пример наблюдаемых RXJS

Давайте теперь увидим простой пример создания и работы с наблюдаемым.

Сначала давайте создадим наблюдаемый:

let ob$ = Observable.create((observer) => {
    observer.next("A new value!");
});

Мы создаем ob $ Наблюдаемый, и мы определяем логику, которую наш наблюдаемый должен делать в теле прошлого метода.

В этом примере наблюдаемая будет просто излучать Новое значение! ценность для подписанного наблюдателя.

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

Мы называем Далее () Метод объекта Observer для информирования его доступных значений.

Примечание : Все объекты наблюдателя должны иметь коллекцию таких методов, как Далее () , полный () и Ошибка () Отказ Это позволяет наблюдаться об этом общаться с ними.

Далее () Метод используется наблюдаемым для пропускания значений (публикация значений) для подписанного наблюдателя.

Далее давайте создадим объект наблюдателя:

let observer = {
    next: data => console.log( 'Data received: ', data),
    complete: data => console.log('Completed'),
};

Наблюдатель - это простой объект JavaScript, который содержит такие методы, как Далее () , полный () и Ошибка () Отказ Это означает, что он знает, как получить уведомление о наблюдаемых.

Примечание : Вы также можете добавить другие пользовательские атрибуты и методы для объектов наблюдателя, кроме Далее () , полный () и Ошибка () Отказ

Наконец, давайте подписаться на наш ob $ Наблюдаемый и вернуть Подписка :

let subscription = ob$.subscribe(observer);

Как только вы подпишитесь к ob $ Замечаемое, вы получите следующий вывод в консоли:

Data received: A new value! 

Операторы RXJS

RXJS обеспечивает реализацию наблюдаемой концепции, но и различные операторы, которые позволяют создавать наблюдаемые.

Операторы предлагают декларативный способ выполнения сложных асинхронных операций с наблюдателями.

Оператор работает над источником, наблюдаемым, наблюдая за его излучаемыми значениями и применяя предполагаемое преобразование на них, затем возвращает новое наблюдаемое с модифицированными значениями.

Там много операторов RXJS, таких как:

• Нажмите () ,
• карта () ,
• Фильтр () ,
• CONCAT () ,
• Поделиться () ,
• Повторите попытку () ,
• CatchError () ,
• Переключатель () ,
• и FlatMap () и т.п.

Трубы: сочетание нескольких операторов

RXJS предоставляет две версии труба () Функция: автономная функция и метод на Наблюдаемый интерфейс.

Вы можете использовать труба () Функция/метод для объединения нескольких операторов. Например:

import { filter, map } from 'rxjs/operators';
const squareOf2 = of(1, 2, 3, 4, 5,6)
  .pipe(
    filter(num => num % 2 === 0),
    map(num => num * num)
  );
squareOf2.subscribe( (num) => console.log(num));

из () Способ создаст и вернет наблюдаемый из 1, 2, 3, 4, 5,6 Числа и труба () Метод будет применять Фильтр () и карта () Операторы на каждом излученном значении.

Как наблюдаемые используются в угловом угловом

Угловые используют RXJS, наблюдаемые в виде встроенного типа для многих его API, таких как:

• Httpclient Методы Возврат, наблюдаемые и фактические запросы отправляются только при подписании на возвращенные наблюдаемые.
• Маршрутизатор использует наблюдаемые в нескольких местах, таких как:
• [События] (https://angular.io/api/router/router#events) Из экземпляра маршрутизатора является наблюдаемый для прослушивания событий на маршрутизаторе.
• Также ActivatedRoute (который содержит информацию о маршруте, связанном с загруженным в данный момент компонента на роутеровке), имеет много наблюдаемых свойств, таких как Пармы и Параммап Для параметров маршрута.

Предположим, у вас есть угловой компонент, а служба маршрутизатора введена как Маршрутизатор Отказ Этот пример из Stackoverflow Показывает, как вы можете подписаться на события маршрутизатора для обнаружения изменения маршрута:

import { Component } from '@angular/core'; 
import { Router, Event, NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
@Component({
    selector: 'app-root',
    template: ``
})
export class AppComponent {
    constructor(private router: Router) {
        this.router.events.subscribe((event: Event) => {
            if (event instanceof NavigationStart) {
                console.log("Navigation start");
            }
            if (event instanceof NavigationEnd) {
                console.log("Navigation end");
            }
            if (event instanceof NavigationError) {

                console.log(event.error);
            }
        });
   }
}     

• Модуль реактивных форм использует реактивное программирование и наблюдаемые для прослушивания пользовательского ввода.
• @output () Декоратор в компоненте берет Eventemitter пример. Eventemitter является подклассом наблюдаемых RXJS.

Как использовать RXJS 6, наблюдаемый в вашем угловом коде

Угловые используют наблюдаемые (реализуемые с библиотекой RXJS) для всех асинхронных событий. Если вы используете угловые CLI 6 | 7, RXJS 6 будет установлен по умолчанию на вашем проекте.

В противном случае вы можете установить его через NPM, используя:

$ npm install rxjs --save 

Чтобы иметь возможность использовать наблюдаемый символ в вашем коде, сначала нужно импортировать его:

import { Observable } from 'rxjs';

Это новый импортный путь в RXJS 6, который отличается от RXJS 5.

Работа с HTTPClient Module и наблюдаемыми

Новый угловой Httpclient Работает с наблюдателями по умолчанию. Такие методы, как Получить () , пост () , поставить () и Удалить () Верните экземпляр наблюдаемого интерфейса.

HTTP-запросы отправляются только тогда, когда мы подписываемся на наблюдаемые.

Это пример сделать HTTP-запрос:

getItems(): Observable {
   return this.httpClient.get(this.itemUrl);
}

Мы предполагаем, что вы ввели Httpclient Сервис как httpclient Отказ

Использование наблюдаемого с asyncpipe

Угловой Asyncpipe подписывается на наблюдаемые и возвращает испускаемые данные. Например. Давайте предположим, что у нас есть этот метод:

getItems(): Observable {
  this.items$ = this.httpClient.get(this.itemUrl);
}

предметы $ Переменная типа наблюдаемой <элемент []> `.

После звонка GetItems () Метод на компоненте мы можем использовать async Труба в компонентном шаблоне, чтобы подписаться на возвращенные наблюдаемые:

Подписки к наблюдаемым

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

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

Давайте начнем с определения наблюдаемого, что обеспечивает поток обновлений

Используя карту () оператора

карта () Оператор похож на Array.map () метод. Это позволяет отображать наблюдаемые ответы на другие значения. Например:

import { Observable} from 'rxjs';
import { map } from 'rxjs/operators';
getItems(): Observable> {
  return this.aService.getItems().pipe(map(response => response.data));
}

GetItems () Метод возвращает наблюдаемый. Мы используем карта () Оператор для возврата данные Свойство объекта ответа.

Оператор позволяет нам отображать ответ наблюдаемый поток в данные значение.

Мы импортируем непродовольственный оператор карта () от RXJS/операторы пакет, и мы используем труба () Метод (который принимает переменное количество непродовочных операторов) для обертывания оператора.

Использование оператора фильтра ()

Фильтр () Оператор похож на Array.filter () метод. Это позволяет фильтровать наблюдаемый поток и возвращает другой наблюдаемый. Например:

import { Observable} from 'rxjs';
import { filter } from 'rxjs/operators';

filter(): Observable> {
  
  return this.aService.getItems()
    .pipe(
      filter(response => response.code === 200));
}

Мы используем Фильтр () Оператор выделяет только уведомление об наблюдателях наблюдаемого потока, когда код состояния отклика HTTP составляет 200.

Заключение

В этом руководстве вы были представлены реактивным программированием, потоками данных и RXJS 6.

Вы узнали, что реактивное программирование касается кодирования асинхронных потоков данных, и что RXJS является наиболее популярным осуществлением, которое реализует наблюдаемые и шаблон наблюдателя.

Вы узнали, что является наблюдаемым - объект, который излучает или публикует значения со временем и асинхронно.

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

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

Вы узнали о холодных и горячих наблюдаемых наблюдателях - Горячие ссылки, когда наблюдаемые запускают значения публикации, когда он создан еще до получения любых подписок.

Вы узнали о операторах RXJS, которые являются методами, которые используются для составляющих наблюдаемые и работать над их потоками данных.

Наконец, вы узнали, что угловые 6 и 7 используют RXJS V6 для работы с асинхронными операциями и API (вместо обратных вызовов или обещаний) во многих его обычно используемых модулях, таких как Httpclient , Маршрутизатор и Реактивность Отказ

Это Статья был изначально опубликован в Techiediaries Отказ