Практическое использование

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

При создании реального проекта должна существовать связь между компонентами. Способ взаимодействия между компонентами заключается в использовании Observable и Subject (что является типом наблюдаемой). Нас интересуют два метода: Observable.subscribe () и Subject.next ().

Observable.subscribe ()

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

Subject.next ()

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

Типовые предложения

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

• Прослушайте данные со входа.
• Обрежьте значение (удалите пробелы) и убедитесь, что это минимальная длина.
• Debounce (чтобы не отправлять запросы API на каждое нажатие клавиши, а вместо этого ждать перерыва при нажатии клавиши).
• Не отправляйте запрос, если значение остается прежним (например, быстрое нажатие на символ, затем возврат на одну позицию).
• Отмените текущие запросы AJAX, если их результаты будут аннулированы обновленными результатами.

Написание этого в полном JavaScript может быть довольно сложным. С помощью наблюдаемых вы можете использовать простую серию операторов RxJS:

Тип-ahead.ts

Код TypeScript:

import { fromEvent } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { map, filter, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
const searchBox = document.getElementById('search-box');
const typeahead = fromEvent(searchBox, 'input').pipe(
  map((e: KeyboardEvent) => e.target.value),
  filter(text => text.length > 2),
  debounceTime(10),
  distinctUntilChanged(),
  switchMap(() => ajax('/api/endpoint'))
);
typeahead.subscribe(data => {
 // Handle the data from the API
});

Демонстрация в реальном времени:

См. Pen type_Ahead от w3resource ( @ w3resource ) в CodePen .

Экспоненциальный откат

Экспоненциальный откат - это метод, в котором вы повторяете API после сбоя, увеличивая время между повторными попытками после каждого последующего сбоя, с максимальным числом повторов, после которого запрос считается неудавшимся. Это может быть довольно сложно реализовать с помощью обещаний и других методов отслеживания вызовов AJAX. С наблюдаемыми это очень просто:

Код TypeScript:

import { pipe, range, timer, zip } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { retryWhen, map, mergeMap } from 'rxjs/operators';
function backoff(maxTries, ms) {
 return pipe(
   retryWhen(attempts => zip(range(1, maxTries), attempts)
     .pipe(
       map(([i]) => i * i),
       mergeMap(i =>  timer(i * ms))
     )
   )
 );
}
ajax('/api/endpoint')
  .pipe(backoff(3, 250))
  .subscribe(data => handleData(data));
function handleData(data) {
  // ...
}

Демонстрация в реальном времени:

См. Перо exponetial_backoff от w3resource ( @ w3resource ) в CodePen .

Пример связи между компонентами

Служба сообщений

С помощью службы сообщений вы можете подписаться на новые сообщения в любом компоненте с помощью метода getMessage (), отправлять сообщения из любого компонента с помощью метода sendMessage (message: string) и удалять сообщения из любого компонента с помощью метода clearMessages ().

Метод clearMessages () фактически просто отправляет пустое сообщение, вызывая this.subject.next () без каких-либо аргументов, логика для очистки сообщений при получении пустого сообщения находится в компоненте приложения ниже.

Код TypeScript:

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class MessageService {
    private subject = new Subject();
    sendMessage(message: string) {
        this.subject.next({ text: message });
    }
    clearMessages() {
        this.subject.next();
    }
    getMessage(): Observable {
        return this.subject.asObservable();
    }
}

Демонстрация в реальном времени:

См. Pen message_component.ts от w3resource ( @ w3resource ) на CodePen .

Домашний компонент, который получает сообщения

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

Код TypeScript:

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { MessageService } from './_services/index';
@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})
export class AppComponent implements OnDestroy {
    messages: any[] = [];
    subscription: Subscription;
    constructor(private messageService: MessageService) {
        // subscribe to home component messages
        this.subscription = this.messageService.getMessage().subscribe(message => {
          if (message) {
            this.messages.push(message);
          } else {
            // clear messages when empty message received
            this.messages = [];
          }
        });
    }
    ngOnDestroy() {
        // unsubscribe to ensure no memory leaks
        this.subscription.unsubscribe();
    }
}

Демонстрация в реальном времени:

См. Перо receiveMessage.ts от w3resource ( @ w3resource ) на CodePen .

Домашний компонент, который отправляет сообщения

Домашний компонент использует службу сообщений для отправки сообщений в компонент приложения.

Код TypeScript:

import { Component } from '@angular/core';
import { MessageService } from '../_services/index';
@Component({ templateUrl: 'home.component.html' })
export class HomeComponent {
    constructor(private messageService: MessageService) { }
    sendMessage(): void {
        // send message to subscribers via observable subject
        this.messageService.sendMessage('Message from Home Component to App Component!');
    }
    clearMessages(): void {
        // clear messages
        this.messageService.clearMessages();
    }
}

Демонстрация в реальном времени:

См. Pen sendMessage.ts от w3resource ( @ w3resource ) на CodePen .

Есть и другие примеры того, как угловые наблюдаемые могут применяться к приложениям для работы с реальными словами, как, например, создание директивы Simple Infinite scroller или выполнение запроса Httpclient и использование API, например создание запроса к API YouTube для создания поиска видео или даже для эффективного входа в систему. операция в угловом режиме, где пользователь получает асинхронное уведомление о результатах попытки входа в систему. Удачи получить еще более грязные руки.

Предыдущий: Сравнение наблюдаемых с другими методами
Далее: Самозагрузка