Angular Observables and Promises — как их использовать

Angular, как мы все знаем, это JavaScript-фреймворк, который облегчает создание веб-приложений. RxJS действительно сводит принципы функционального программирования к JavaScript.

Функциональное программирование в JavaScript?

Все началось с нарастания асинхронности или асинхронного JavaScript,  когда у нас есть данные, которые проходят через наше приложение из разных источников, например, API, веб-сокетов и событий и таймеров, инициируемых пользователем. У нас есть ситуация, когда мы не можем контролировать, когда какие-либо из этих данных отправляются через наше приложение. Мы также не можем определить порядок, в котором это происходит, поэтому наличие более функциональной парадигмы поможет решить эту проблему. Вы хотите, чтобы ваше приложение было более предсказуемым, но масштабирование приложений, выполняющих клиентскую часть, означает меньшую предсказуемость.

Затем наступает рост Обещаний, которые должны решать проблемы, которые у всех нас были с XHR, которые спасли нас от ада обратного вызова. Вы обнаружите, что чем больше вы используете Promises с их функциями then и catch, тем больше они снова выглядят как обратные вызовы.

Немного проблем с обещаниями 

• Обещание определяется там, где создаются данные, а не там, где они используются. 
• По мере того как ваше приложение становится больше, с Promises становится сложно управлять 
• Что если я хочу повторить неудачный звонок? Теперь мы снова вернулись в адский колбэк.

Затем появились наблюдаемые

RxJS — это объединение идей Promises, обратных вызовов и потока данных и упрощение работы с ними.

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

Например, пусть data = http.get (‘/ api.json’). В Angular данные будут Observable ответов, потому что метод HTTP.get возвращает Promise.

Поиск в YouTube API с использованием Angular и Observable

Чтобы продемонстрировать возможности Observable с Angular, мы создадим пример проекта, запрашивающего API YouTube. 

Создать новое угловое приложение

Откройте Angular IDE , нажмите «Файл» в верхнем меню, затем выберите «Новый», затем нажмите «Angular Project».

Это приведет нас к странице, где мы можем указать детали проекта, такие как имя, версия Angular-CLI и Node для использования. Теперь введите в youtube-searcherкачестве имени проекта 1.6.8 в качестве версии Angular CLI, 9.5.0 в качестве версии Node.js и 5.6.0 в качестве версии npm. Нажмите Далее, затем нажмите Готово.

Получить ключ API в консоли Google

Чтобы взаимодействовать с API YouTube, нам нужно получить ключ API из консоли Google, поэтому перейдите по этой ссылке и следуйте инструкциям, чтобы получить ключ API . Вам нужно будет создать приложение, чтобы получить для него учетные данные API. Это позволит нашему приложению отправлять запросы API в API YouTube. 

Нажмите, Create credentialsчтобы создать учетные данные для вашего приложения. 
После получения ключа API вернитесь к своему проекту в угловой среде IDE и создайте srcфайл TypeScript в папке приложения.

Вы можете назвать файл  api-key.ts, и это будет его содержимое:

const API_KEY = 'your-api-key-here'; export default API_KEY;

После этого вы импортируете ключ API в  app.component.tsфайл, в который мы напишем код для запроса API YouTube. Делай это так:

import API_KEY from './api-key';

Запросите API YouTube

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

Далее, давайте создадим нашу форму в файле src / app / app.component.ts. Добавьте следующий код:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import API_KEY from './api-key';

const API_URL = 'https://www.googleapis.com/youtube/v3/search';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular RxJs YouTube Searcher';
  searchForm: FormGroup;
  results: any;

  constructor(private formBuilder: FormBuilder, private http: HttpClient) {
    this.searchForm = this.formBuilder.group({
      search: ['', Validators.required]
    });

    this.searchForm.controls.search.valueChanges.subscribe(result => console.log(result));
  }
} 

 import { ReactiveFormsModule } from '@angular/forms';
    import { HttpClientModule } from '@angular/common/http';

    .....

    imports: [
        BrowserModule,
        ReactiveFormsModule,
        HttpClientModule
    ],

    ......

<h3>{{ title }}</h3>

<form [formGroup]="searchForm">
<label for="search">Search YouTube</label>
<br />
<input formControlName="search" id="search" />
</form>

                            this.searchForm.controls.search.valueChanges.subscribe(searchTerm => {
      this.http.get<any>(
         `${API_URL}?q=${searchTerm}&key=${API_KEY}&part=snippet`)
          .subscribe(result => {
        console.log(result);
   });
});

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import API_KEY from './api-key';

const API_URL = 'https://www.googleapis.com/youtube/v3/search';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular RxJs YouTube Searcher';
  searchForm: FormGroup;
  results: any;

  constructor(private formBuilder: FormBuilder, private http: HttpClient) {
    this.searchForm = this.formBuilder.group({
      search: ['', Validators.required]
    });
  }

  ngOnInit() {
    this.search();
  }

  search() {
     this.searchForm.controls.search.valueChanges.subscribe(searchTerm => {
      this.http.get<any>(
         `${API_URL}?q=${searchTerm}&key=${API_KEY}&part=snippet`)
         .subscribe(result => {
        console.log(result);
      });
    });
  }
}

import { switchMap } from 'rxjs/operators';
search() {
     this.searchForm.controls.search.valueChanges.pipe(
      switchMap(searchTerm => this.http.get<any>(
        `${API_URL}?q=${searchTerm}&key=${API_KEY}&part=snippet`))
     ).subscribe(result => console.log(result));
}

import { switchMap, debounceTime } from 'rxjs/operators';
search() {
     this.searchForm.controls.search.valueChanges.pipe(
      debounceTime(500),
      switchMap(searchTerm => this.http.get<any>(
        `${API_URL}?q=${searchTerm}&key=${API_KEY}&part=snippet`))
     ).subscribe(result => console.log(result));
}

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { map, switchMap, debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
import API_KEY from './api-key';

const API_URL = 'https://www.googleapis.com/youtube/v3/search';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular RxJs YouTube Searcher';
  searchForm: FormGroup;
  results: Observable<any>;

  constructor(private formBuilder: FormBuilder, private http: HttpClient) {
    this.searchForm = this.formBuilder.group({
      search: ['', Validators.required]
    });
  }

  ngOnInit() {
    this.search();
  }

  search() {
     this.results = this.searchForm.controls.search.valueChanges.pipe(
       debounceTime(500),
       filter(value => value.length > 3),
       distinctUntilChanged(),
       switchMap(searchTerm => this.http.get<any>(`${API_URL}?q=${searchTerm}&key=${API_KEY}&part=snippet`)),
       map(response => response.items)
     );
  }
}

<h3>{{ title }}</h3>

<form [formGroup]="searchForm">
<label for="search">Search YouTube</label>
<br />
<input formControlName="search" id="search" />
<div *ngFor="let result of results | async">
<a [href]="'https://www.youtube.com/watch?v=' + result.id.videoId" target="_blank">
{{result.snippet.title}}
</a>
<p>{{result.snippet.description}}</p>
<img [src]="result.snippet.thumbnails.default.url" style="width: 100%; max-width: 250px;" />
</div>
</form>