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

Метод 1. Кэширование ответа API
Один эффективный способ предотвратить множественные вызовы API — кэшировать данные ответа. Angular предоставляет несколько механизмов кэширования, например использование оператора RxJS shareReplayили сохранение ответа в сервисе. Кэшируя ответ, последующие запросы могут обслуживаться из кеша, что устраняет необходимость в дополнительных вызовах API.

// Example using shareReplay operator
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { shareReplay } from 'rxjs/operators';
@Injectable()
export class DataService {
  private cachedResponse$: Observable<any>;
  constructor(private http: HttpClient) {}
  getData(): Observable<any> {
    if (!this.cachedResponse$) {
      this.cachedResponse$ = this.http.get<any>('api/data').pipe(
        shareReplay(1) // Cache the response and replay it to subsequent subscribers
      );
    }
    return this.cachedResponse$;
  }
}

Метод 2. Устранение дребезга вызовов API
Устранение дребезга — это метод, который откладывает выполнение функции до истечения определенного периода времени. Его можно использовать для предотвращения быстрых последовательных вызовов API. Отменяя вызов API, вы гарантируете, что будет выполнен только последний вызов в течение указанного интервала времени, а все предыдущие вызовы будут отменены.

// Example using lodash debounce function
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { debounce } from 'lodash';
@Component({
  selector: 'app-search',
  template: `
    <input type="text" (input)="onSearch($event.target.value)" />
  `,
})
export class SearchComponent {
  private searchApi = debounce((term: string) => {
    this.http.get(`api/search?term=${term}`).subscribe((response) => {
      // Handle the API response
    });
  }, 300); // Debounce time set to 300ms
  constructor(private http: HttpClient) {}
  onSearch(term: string): void {
    this.searchApi(term);
  }
}

Метод 3: использование библиотек управления состоянием
Библиотеки управления состоянием, такие как NgRx или Akita, могут помочь предотвратить дублирование вызовов API. Эти библиотеки предоставляют централизованное хранилище для управления состоянием приложения и позволяют отправлять действия для запуска вызовов API. Проверив хранилище перед вызовом API, вы сможете избежать повторных запросов.

// Example using NgRx store
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { fetchData } from './store/actions';
@Component({
  selector: 'app-data',
  template: `
    <button (click)="getData()">Fetch Data</button>
  `,
})
export class DataComponent {
  constructor(private store: Store) {}
  getData(): void {
    this.store.dispatch(fetchData()); // Dispatch an action to trigger the API call
  }
}

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