Let’s take the following example:

<template>
  <div class="container">
    <p>Name: {{name}}</p>
    <p>Age: {{age}}</p>
  </div>
</template>
<script>
data():{
  return{
    name: null
    age: null
  }
}

created():{
  fetchUser().
    then(res => {
     this.name = res.data.name
     this.age = res.data.age 
    }
    )
}
</script>

In this example, we have a Vue Component that needs to fetch the user name and age before being able to create the template and display them. We use the lifecycle hook created() to fetch the data in the component. This will finally work, because of the reactive nature of Vue, but we are going to have an error in the console telling us that name is undefined. This happens because when we navigate to the component and this one gets rendered, the value of the variables is not yet fetched, the component rendering first the template, then executing the script. So we get the error on the console, then the script is run, data is fetched and displayed.

Let’s see how to do that without having the error on the console:

<template>
 <div class="container" v-if="dataFetched">
   <p>Name: {{name}}</p>
   <p>Age: {{age}}</p>
 </div>
</template>
<script>
data: {
  return {
    name: null
    age: null
    dataFetched: false
  }
},

beforeRouteEnter(to, from, next) {
  fetchUser().
    then(res => {
      next(vm => vm.setUser(res.data)
    })
},

methods: {
  setUser(user){
    this.name = user.name
    this.age = user.age
    this.dataFetched = true
  }
}
</script>

To achieve this, we first use the beforeRouteEnter() guard of the Vue Router that is called before the Router navigates to our component route. This guard has three parameters: to, from and next. From is an object containing the information about the route we are navigating from, also the parameters passed by route, to is the information about the route we are navigating to, next() is the function we call after we executed all we need on the guard to pursue the navigation.

But moving the fetch logic from the lifecycle hook to the guard alone won’t solve our problem because fetch is an asynchronous operation that will start on the guard, then next is called, leading to template rendering before data being fetched and virtually the same error on console.

To achieve this, we use a trick. We declare a boolean in the component, let’s say dataFetched, that we instantiate to false and we use it to trigger with v-if the render of the container div only when the data is fetched. We set the variable to true in the setUser method in the component after data is fetched, this way preventing the render of the template and the error on the console.

Happy coding!!!

Note: given the semver adopted from now on by Angular team, I will refer to all versions of Angular2+ as Angular. For the old Angular 1.x, I will use AngularJs

The new HttpClient on Angular 5 is here to replace the deprecating @angular/http module.

The new HttpClientModule will be imported from @angular/common/http.

For the purpose of this article, we are going to use a service to fetch the data in which we are going to inject the new HttpClient. Our service is going to be injected into the component that is supposed to consume the data.

First, we need to import the HttpClientModule. We need to do this only once at the app.module level.

...
import { HttpClientModule } from '@angular/common/http';

...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

After that, we are going to inject the HttpClient into our service and to use it inside a get() function.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable()
export class FetchDataService {

  constructor(private _http: HttpClient) { }

  getUsers() {
    return this._http.get('https://yourapi/users');
  }

}

The getUser() will return an Observable that we are going to treat in our consuming component.

import { Component, OnInit } from '@angular/core';
import { FetchDataService } from '../fetch-data.service';

@Component({
  selector: 'fetch-data',
  templateUrl: './fetch-data.component.html',
  styleUrls: ['./fetch-data.component.scss']
})
export class FetchDataComponent implements OnInit {

  constructor(private _fetchDataService: FetchDataService) { }

  data: any; //any here is just for demo purpose; please change with the type returned by your endpoint

  ngOnInit() {
     this._fetchDataService.getUsers().subscribe(
      data => { this.data = data},
      err => console.error(err)
     );
  }

}

Since getUsers() returns an Observable, we call the subscribe() function to listen and process the returned data.

If your company needs consulting on migration from Angular 1 to Angular 2/4/5 or training/update Angular knowledge, write me to contact@bogdancarpean.com