recommended way to asynchronously fetch data for render call?

Description

~In the constructor on the Bigger Example on the README, it shows to await this.renderComplete, but await can only be used inside of an async function and the constructor function is not marked as async. It seems that the spec doesn’t say anything about a class allowing asynchronous constructor functions.~ This was clarified below. I missed that the async is declared in the click event function inside constructor.

At any rate, the readme doesn’t seem as clear about this, but what is the recommended way to asynchronously fetch data and use it in the _render call?

[justinfagnani]

See https://www.npmjs.com/package/@lit-labs/task

[Westbrook]

I discussed this with @mkay581 via slack and got some more information to help clarify an answer. In his context, he’s working with iron-pages to display content and only wants to request the data for a page when it is the active page. To do so he’s using code like so:

<iron-pages selected="0" attr-for-selected="active">
  <page-with-async-data-one active>One</page-with-async-data-one>
  <page-with-async-data-two>Two</page-with-async-data-two>
  <page-with-async-data-three>Three</page-with-async-data-three>
</iron-pages>

In the page-with-async-data-one I’m suggesting he relies less on lit-element and more on general JS to see something like the following manage his data:

static get properties() {
    return {
      active: Boolean
    }
}
connectedCallback() {
   super.connectedCallback();
   this.getAsyncData();
 }
get active() {
  return this._active;
}
set active(active) {
  if (active) this.getAsyncData();
  this._active = active;
}
getAsyncData() {
  if (this._gettingData) return;
  this._gettingData = true;
  //...request async data;
}
dataLoaded(data) {
  this.data = data;
  this._gettingData = false
}
_render() {
  if (this._gettingData) {
    return html `Loading...`;
  }
  return html`Something with all of the data put into a template.`;
}

@pshihn Thanks for the clarification on the rendering system, it made explaining this part much easier. Hope this helps anyone else who runs into this issue.