data called in the beginning of component creation, before all lifecycle hooks and page events, so you can use data in them.
The safest place to do xhr request will be on mounted hook or on pageMounted/Init events to make sure the component element successfully mounted to DOM
The only issue is that what you have in component <template> won’t wait for your request and will be rendered with initial data provided. So if you do ajax request in page then you’ll have to manually update related HTML.
Wow. So the best place in my case in doing ajax-request is using “async()”-method - the others are not usable in my case: Because before page is rendered, it must request data from the server and put these requested data within the page template.
With the code above, the render()-method does not wait for data to be succeed ( render()-method seems not the callback of data()-method).
The render()-method returns “undefined” for “data”-object. I can do a promise or call that ajax within the render()-method and return only when data is fetched.
However, is this the right thing to do?
If so, how can I set the data-property afterwards within the render()-method.
Thanks, but this was not the question. I know how to render components.
As you see in my example, the question is:
Where should I put my ajax when render() is not called by a promise of data()-method. Calling async within data()-method does not render()-method makes to wait for the data()-result. When doing asyn within render() (even with promise), component will be undefined.
data called in the beginning of component creation, before all lifecycle hooks and page events, so you can use data in them.
render() does not wait until data() has fetched the result from async request, hence it renders without appropriate data. Doing async within render, returns undefined for the component. No promise-chain…
no problem. thanks for helping;) however, “async” is the only way, I think, because there is no promise/callback-connection between data() and render()…