Как найти или добавить элементы в/в Obersavble массива типов в Angular и rxjs?

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

Теперь я придумал это решение, которое работает с использованием локального Array<Company> в качестве кеша. Он возвращает of() найденного элемента, а альтернативно загружает новый и сохраняет его в кеше.

export class CompanyService {
  private cache: Array<Company> = [];
  private path: string = '';

  getById(id: number): Observable<Company> {
    const company = this.cache.find(item => item.id === id);

    if (company) {
      return of(company);
    }

    return this.http.get<any>(this.path + id).pipe(
      map(response => {
        this.cache.push(response);
        return response;
      }),
      catchError(error => {
        return of(null);
      })
    );
  }
}

Это правильный способ сделать это?

Я подумал, что было бы лучше использовать что-то вроде:

private cache$: Observable<Array<Company>>;

Но я не знаю:

  • … это лучший подход?
  • … как добавить новый элемент?
  • … как найти элемент в этом Observable и вернуть новый иначе?

typescript angular observable rxjs angular9
person lampshade    schedule 29.04.2020    source источник
comment
Это может вам помочь: stackoverflow.com/a/53260507/12193298   -  person Jeroenouw    schedule 29.04.2020
comment
Да, так компоненты используют сервис? тогда лучше использовать наблюдаемый подход. а затем с помощью emit вы можете передать значения.   -  person    schedule 29.04.2020
comment
@savantTheCoder Да, компоненты используют сервис. Вот почему я подумал, что подход Obersavble будет лучше, как вы его поддерживаете.   -  person lampshade    schedule 29.04.2020
comment
Да, я поставил это как ответ. вы можете проголосовать за него, если это решение.   -  person    schedule 29.04.2020

Ответы (1)


arrow_upward
0
arrow_downward

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

@Injectable({
  providedIn: 'root'
})
export class CompanyService {
  private cache:Company[] = [];
  private path: string = '';

  getById(id: number): Observable<Company> {
    return new Observable(subs=>{
      const company = this.cache.find(item => item.id === id);
      if(!company){
        this.http.get<Company>(this.path + id).subscribe(result=>{
          this.cache.push(result);
          subs.next(result);
        });
      } else {
        subs.next(company);
      }
    });
  }
}

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

person Burak Göksel    schedule 29.04.2020
comment
Спасибо за Ваш ответ. Не могли бы вы объяснить, в чем разница с текущим решением? Кажется, что он делает то же самое немного сложнее. - person lampshade; 29.04.2020