How to use asynchronous service in ember.js? - ember.js

Question

Before my ember.js app start, I need to access a entry api to get all those api endpoints and csrf token.
I'm trying to do it in service so the response can be accessed everywhere:
import Service from '#ember/service';
import $ from 'jquery'
export default Service.extend({
pageData: null,
init () {
this._super(...arguments)
var self = this
$.ajax({
type: 'get',
url: '/page_data',
dataType: 'json'
}).then((response) => {
self.set('pageData', response)
})
}
});
And I'm injecting the service in initializer:
export function initialize (application) {
application.inject('route', 'api', 'service:page-data');
application.inject('controller', 'api', 'service:page-data');
application.inject('component', 'api', 'service:page-data');
}
export default {
initialize
};
But I can't use the service in my router directly with this.get('api').pageData because it's asynchronous.
I found something on ember.js documentation here:
Operations performed in initializers should be kept as lightweight as possible to minimize delays in loading your application. Although advanced techniques exist for allowing asynchrony in application initializers (i.e. deferReadiness and advanceReadiness), these techniques should generally be avoided. Any asynchronous loading conditions (e.g. user authorization) are almost always better handled in your application route's hooks, which allows for DOM interaction while waiting for conditions to resolve.
But it 's used in initializers, not service.
Any suggests what I can do with my service now?

Answer 1

You can use application's deferReadiness method, to stall your app load.
However, if you require a loading UI, i would suggest to set a promise object to your pageData variable, and as soon as that promise resolves/rejects you can change the state of your app accordingly.

Answer 2

Here's what I did at last:
import Service from '#ember/service';
import $ from 'jquery'
import { Promise } from 'rsvp'
export default Service.extend({
pageData: null,
setup () {
return new Promise((resolve, reject) => {
var self = this
$.ajax({
type: 'get',
url: '/page_data',
dataType: 'json'
}).then((response) => {
self.set('pageData', response)
resolve()
}).catch(() => {
reject()
})
})
}
});
Then in the index route, run the setup in beforeModel hook:
import Route from '#ember/routing/route';
import { all } from 'rsvp'
export default Route.extend({
beforeModel () {
return all([this.get('api').setup()])
},
model () {
window.console.log(this.get('api').pageData)
}
});