Как правильно делать запросы к API в ангуляр 7?

Question

[danilr]

Нужно сделать запрос к API https://developers.themoviedb.org/3
Мне необходимо указать два параметра, один "api_key", второй динамически "query" = "Matrix"(например).
Тут пытался сделать, но, видимо, что-то не так делаю

export class AppComponent {
  title = 'FinderFilms';

  baseURL: string = "https://api.themoviedb.org/3";
  route: string = "/movie/search"
  response: any;
  
  constructor(private http: HttpClient){

  }
  search(){
    const params = new HttpParams().set('api_key', 'd6a5ac2d3d7cab11a084ca8080421b20, 'title',"Матрица");
    const options = {params: params};
    this.http.get(this.baseURL+this.route , options)
    .subscribe((response) =>{
      this.response = response;
      console.log('response: ', response);
    })
  }
}

Как мне указывать параметры динамически и как это правильно оформить?
В ангуляре новичок, поэтому если вы знаете ответ, очень прошу разжевывать ответ:)

Answer 1

[msdosx86]

search(title: string): void {
  const params = new HttpParams()
    .set('api_key', 'd6a5ac2d3d7cab11a084ca8080421b20')
    .set('title', title);
  const url = 'https://api.themoviedb.org/3/movie/search';
  this.httpClient.get(url, { params })
    .subscribe(console.log);
}

Это ужасный, но понятный для вас пример. Вызовы к API надо выносить в сервисы, метод `subscribe` никогда не вызывайте в методах, только один раз в OnInit, а потом дергать его с помощью `.next`.

Comments

[danilr]

У меня большая просьба, написать как будет выглядеть код в Service и как в компоненте и как потом "дергать" с помощью `.next`. Буду крайне благодарен! В документации для меня пока не понятно)

[msdosx86]

danilr, https://stackblitz.com/edit/angular-wn9xyx

[danilr]

Огромное спасибо! А в ангуляре нет такой темы как во Vue - то есть задается basuURL, и все роуты, потом вызываешь как-то так http.get( Routes.searchFilm, params) где searchFilms ="/movie/search" ?

[msdosx86]

danilr, Это делается через interceptor. https://angular.io/guide/http#intercepting-request...

[Сергей]

danilr, можно сделать прослойку для HttpClient методов, как например сделано в этом проекте (стартовый шаблон)

[danilr]

Сергей, спасибо, попробую разобраться)

Answer 2

[Denis]

В гет запросах параметры надо/можно указывать в параметры урла
https://api.themoviedb.org/3/movie/search?title=Ма...
Хотя по коду у вас еще третий параметр вырисовывается query
А вообще поидеи вам нужно делать сервис по работе с апи чтобы не дублировать код для сбора запроса и исходных данных и этот сервис инжектить в компонент вместо httpclient

Comments

[danilr]

Понимаю, что это в URL параметры надо передавать, делается с помощью HttpParams, но не понял точно как туда передавать несколько параметров. Будьте добрый, посмотрите https://developers.themoviedb.org/3/search/search-... , там пример запроса есть , ошибся с API - там другой, исправил, а вместо titlre 'query'.