Make API call before page load

Ionic Framework ionic-v3
1

Hi I am retrieving profile information from an API. I have a tab interface and when the profile tab is clicked for the first time, I am returned with error from the API and when I go back to other tab and revisit the profile tab, the data is fetched and displayed. Here is my profile.ts

import {Component} from '@angular/core';
import {apiCallService} from '../../providers/apiCallService';
import {Platform, NavController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/profile/profile.html',
  providers : [apiCallService]
})
export class profileMain {

	public name: string;
	public loadStatus: string;

  constructor(private apiCall : apiCallService, private platform : Platform) {
  }

  ionViewWillEnter(){
  	this.apiCall.getProfile().subscribe(
            data => {
                this.name = data.json().display_name;
            },
            err => console.log(err)
        );
  }

  
}
2

Any chance the changelog is relevant, specifically the bit in beta 8 where lifecycle events were renamed?

3

I changed onPageWillEnter() to ionViewWillEnter() but still the same

4

@anbumps in your case the ionViewWillEnter lifecycle hook is running before class constructor, So therefore you are getting error.
Use ionViewLoaded or ionViewDidEnter to solve this issue.

5

Still no luck. the http call is only made after I enter the page and the UI is displayed blank but when I go to other tab and come back, it works fine. I need to process the http request before loading my UI

6

@anbumps did you solve this, i have someone similar after upgraded to rc0, if ask if the var has data so i don’t get an error but the data is loaded after the form is rendered

7

I have a same trouble. Could you resolved it? Can you help me, please? @anbumps

8

I think the best solution here is to initialize your properties with some dummy value and use a loading spinner if desired.

1 Like
9

ionViewCanEnter returns a promise, if resolved successfully then the page is rendered, otherwise the transition does not happen.

See the code in the plunker I have attached

8 Likes
10

Great! You help me a lot! Thanks man!

11

Thanks @aaronksaunders - that is exactly what I was looking for!