Angular 5 - Правильно управляйте запросом к серверу - PullRequest
Новая
       5

Angular 5 - Правильно управляйте запросом к серверу

0 голосов
/ 31 января 2019

Мне сообщили, что рекомендуется делать запросы к серверу через сервисы (а не через компоненты), чтобы запрос функции можно было использовать повторно (другими компонентами).Конечно, в конце нам понадобится ответ сервера в компоненте.

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

поэтому, если я сделаю что-то вроде этого: 

//data.component.ts
  const data = this.httpService.getDataFromTheServer();

//httpService.service.ts
  getDataFromTheServer(){
       return this.http.post(url).map(
         res=>res.json())
       }

данные никогда не попадут впеременная компонента.

Мое решение для этой проблемы - использовать в другом "Предмете".как то так: 

 //data.component.ts     

 this.httpService.getDataFromTheServer()
 this.httpService.getData.subscribe(res => {
    const data = res;
}

//httpService.service.ts

   public getData = new Subject();

  getDataFromTheServer(){
       return this.http.post(url).map(
         res=> this.getData.next(res.json()))
       }

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

У кого-нибудь есть другая идея?большое спасибо!

ОБНОВЛЕНИЕ

Спасибо всем респондентам.я понял, что могу сделать это в моем компоненте: 

this.httpService.getDataFromTheServer().subscribe...

, но мне интересно, могу ли я больше чистить свои компоненты, и обойтись только этим: 

const data = this.httpService.getDataFromTheServer()

или если естьдругой способ очистки компонентов?или, может быть, я не понял рекомендации "сделать запросы к серверу через службы"?Я был бы рад объяснить более четко.

Ответы [ 2 ]

0 голосов
/ 31 января 2019

Ofc Ваше первое решение не будет работать.Это потому, что метод this.http.post возвращает не данные запроса, а наблюдаемый объект.Итак, что вам нужно сделать, это подписаться на ваш объект:) 

//data.component.ts
const data = this.httpService.getDataFromTheServer();
data.subscribe(res => console.log(res)); // or just bind res to any other variable

//httpService.service.ts
  getDataFromTheServer(){
     return this.http.post(url).map(
       res=>res.json())
     }

Это решение также дает вам возможность отказаться от подписки на ваш Observale 

ngOnDestroy() {
  this.data.unsubscribe();
}

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

//data.component.ts
ngOnInit() {
  this.httpService.getDataFromTheServer()
  .subscribe(res => myVariable = res) // binding response from server to variable
}

//httpService.service.ts
  getDataFromTheServer(){
     return this.http.post(url)
     .map(res=>res.json())
   }

// Ответ для редактирования

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

Сделайте так:

// component.html 

<ul>
  <li *ngFor="let item of (items | async)">
</ul>
// or if its not an array
<h1>{{ item | async }}</h1>

// component.ts 

public items;

ngOnInit() {
  this.items = this.httpService.getDataFromTheServer();
}

// service.ts 

getDataFromTheServer(){
   return this.http.post(url).pipe(map(res => res.json());
}
0 голосов
/ 31 января 2019

Вы можете сделать это: 

//data.component.ts
this.httpService.getDataFromTheServer().subscribe((data) => {
   //assign your data here
});

//httpService.service.ts
getDataFromTheServer(){
   return this.http.post(url);
}

, поскольку this.http.post возвращает Observable<any>, и вам необходимо подписаться на него.

...