Делать запросы Http с использованием Angular маршрутизации? - PullRequest
Новая
       10

Делать запросы Http с использованием Angular маршрутизации?

0 голосов
/ 22 февраля 2020

Я работаю с Angular 8, Ioni c 4 и пытаюсь уменьшить количество обращений к серверу путем кэширования

У меня есть служба поиска, которая возвращает Observable.

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

Например: в маршрутах что-то вроде {path: 'api /: func /: term', component: ApiComponent}

затем на странице я бы сделал запрос на поиск маршрута API, например: http.get ('/ api / search-cars / corvette') направил бы функцию searchCars (term: string) и принял бы в качестве аргумента corvette. Это функция фильтра, возвращающая часть массива, которая находится в хранилище RX JS.

Цель этого состоит в том, чтобы иметь возможность кэшировать этот URL-адрес запроса, чтобы сервер не попадал каждый раз при сортировке данных.

Когда я пытаюсь что-то подключить, я получаю ошибку 404 , Есть ли способ создать внутренний API?

Ответы [ 2 ]

1 голос
/ 22 февраля 2020

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

Учитывая предоставленную вами информацию, я сделал некоторые предположения относительно использования вами API и StackBlitz. совместное использование потребовало бы больше работы, чтобы быть полным решением, но вы можете посмотреть на динамическую c услугу «кэширования» здесь: https://stackblitz.com/edit/angular-vhijkx

Я использовал карту хранить ответы на прошлые запросы, но вы также можете использовать отдельные переменные, учитывая вариант использования. Чтобы сохранить «кэш» после загрузки страницы, его можно также упорядочить и поместить в localStorage или sessionStorage. 

private cache: Map<string,any[]> = new Map();

getRequest(endpoint: string, termQuery: string): Observable<any> {
  const url = `${this.apiBase}/${endpoint}`,
    params = new HttpParams().set(this.term, termQuery),
    storeId = `${endpoint}:${termQuery}`,
    cache = this.cache.get(storeId);

  if (cache) {
    console.log('fetched from cache');
    return of(cache);
  } else {
    console.log('fetched from API');
    return this.http.get(url, {params}).pipe(
      tap(response => {
        this.cache.set(storeId,response);
      })
    );
  }
}

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

1 голос
/ 22 февраля 2020

Я думаю, вам не нужны поддельные http-запросы. Как вы сказали, у вас есть сервисный уровень, так что вы можете хранить самый важный результат в тот момент, когда вы сделали первый запрос к конечной точке. Некоторые идеи здесь:

1 - ShareReplay: где вы храните запрос для подписчиков do c

2 - Хранилище: сохраните данные запроса в хранилище клиента ( как локальное хранилище или что-то еще) 

  listUsers(): Observable<User[]>{

    const storageUsers = localStorage.getItem('users');

    return storageUsers 
    ? of<User[]>(storageUsers) 
    : this.http.get<User[]>(`some-end-point/users`)
       .pipe(
         tap(users => localStorage.setItem('users', users))
       );      
  }

3- Redux Do c

...