Mastering server requests in Angular 5

Question

Mastering server requests in Angular 5

I have come across recommendations stating that server requests should be made via services and not components in order to ensure reusability of functions by other components. Ultimately, the server response is needed in the component.

My query pertains to the best practice for making a call from the component to the service to retrieve data. I am concerned because HTTP requests are handled asynchronously using Observables.

If I were to do something like this:

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

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

The data does not populate in the component's variable.

My solution to this issue is using another "Subject" as follows:

 //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()))
       }

While this works fine, I am unsure if it's the best practice. Does anyone have any alternative ideas? Thank you!

UPDATE

Thank you to all who responded. I now understand that in my component, I can use:

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

But I am curious if there is a way to streamline my components further and make do with just:

const data = this.httpService.getDataFromTheServer()

Is there another method to simplify the components or did I misunderstand the recommendation to "make server requests via services"? I would appreciate further clarification.

javascript angular typescript rxjs angular-services

Answer 1

Answer №1

It's important to note that your initial approach may not yield the desired results. This is because the "this.http.post" method does not return request data, but rather an observable object. Therefore, it is necessary to subscribe to the object in order to retrieve the data :)

//data.component.ts
const data = this.httpService.getDataFromTheServer();
data.subscribe(res => console.log(res)); // or assign res to a different variable

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

This approach also allows for easy unsubscription from the Observable.

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

Furthermore, there is no need to bind the service method to a variable. You can streamline it as follows:

//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())
 }

// Answer to edit

In theory, you could opt for another approach, but I would recommend utilizing the async pipe to maintain a clean component structure.

Here's how you can do it:

// component.html

<ul>
  <li *ngFor="let item of (items | async)">
</ul>
// or if it's 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());
}

Answer 2

It's important to note that your initial approach may not yield the desired results. This is because the "this.http.post" method does not return request data, but rather an observable object. Therefore, it is necessary to subscribe to the object in order to retrieve the data :)

//data.component.ts
const data = this.httpService.getDataFromTheServer();
data.subscribe(res => console.log(res)); // or assign res to a different variable

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

This approach also allows for easy unsubscription from the Observable.

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

Furthermore, there is no need to bind the service method to a variable. You can streamline it as follows:

//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())
 }

// Answer to edit

In theory, you could opt for another approach, but I would recommend utilizing the async pipe to maintain a clean component structure.

Here's how you can do it:

// component.html

<ul>
  <li *ngFor="let item of (items | async)">
</ul>
// or if it's 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());
}

Answer 3

Answer №2

Here is a way to achieve this:

//app.component.ts
this.userService.fetchUserData().subscribe((userData) => {
   //process the user data here
});

//user.service.ts
fetchUserData(){
   return this.http.get(userUrl);
}

Remember to subscribe to this.http.get as it returns an Observable<any>.

Answer 4

Here is a way to achieve this:

//app.component.ts
this.userService.fetchUserData().subscribe((userData) => {
   //process the user data here
});

//user.service.ts
fetchUserData(){
   return this.http.get(userUrl);
}

Remember to subscribe to this.http.get as it returns an Observable<any>.

Mastering server requests in Angular 5

Answer №1

Answer №2

Similar questions

Encountered an issue while trying to establish a connection between node.js and MongoDB

Formulate a Generic Type using an Enum

The Rails application is loading JavaScript three times

Having trouble with Javascript's JSON.stringify or PHP's json_decode?

Using Python to interact with forms and click JavaScript buttons

Switching the border of a div that holds a radio button upon being selected

Leveraging external modules within Angular 2 to enhance component functionality

Issues with javascript functionality in Internet Explorer version 9 and higher

How can one access the owner function from a different function?

(NodeJS + Socket IO Issue) NodeJS is sending duplicate data when the page is refreshed, causing an improper response

Loading `.obj` and `.mtl` files in THREE.js with accompanying PNG textures

NextImage's ImageProps is overriding src and alt properties

Showing an error message upon submission in Angular 4 according to the server's response

Utilizing jQuery to Sort Table Rows based on an Array of Class Names

What is the process for assigning a function and its arguments as a callback in programming?

Tips for avoiding flickering in a background image when it is being changed

What is the most common method for creating a dropdown menu for a website's navigation?

Tips for enhancing the appearance of a React component

"Failed to insert or update a child record in the database due to a SQL

What is the most effective way to reset the v-model in the child component using the parent component?