呈现异步函数的正确方法是什么？

Question

我有一个函数，它获取一个对象并从对所述对象的检查中返回一个布尔值。

我需要这个布尔值来决定我的 render() 函数的输出应该是什么 HTML。当在我的 render() 函数中调用检查获取的对象的函数时，它总是返回“未定义”，因为它总是评估为真。

我应该如何在适当的时间输出正确的值？谢谢你。

    async isGreenlisted() {
        return fetch(`${WEB_SERVICE_URL}/v2/banners/${this.viewId}`)
            .then(res => {
                for (let list in res) {
                    if (res[list].isDisplayed && list === "green") {
                        console.log("green true");
                        return true;
                    }
                }
                return false;
            });
    }

    render() {
        return html`
            <style>
                paper-button {
                    color: blue;
                }
            </style>
            <div>
                ${this.isGreenlisted()
            ? html`
                            <paper-button raised @click="${this._onClick}">Disable Powered By</paper-button>
                      `
            : html`
                            <paper-button raised @click="${this._onClick}">Enable Powered By</paper-button>
                      `}
            </div>
        `;
    }
}

Answer 1

isGreenlisted()Promise在三元运算符中返回so ，您实际上是在评估承诺本身而不是它将解析为的值，并且由于类实例为真，因此始终显示第一个模板。

您应该等待承诺的结果，例如使用lit-html'suntil指令：

import {until} from 'lit-html/directives/until';

render() {
  return html`
  ${until(
    this.isGreenlisted().then(res => res
      ? html`True`
      : html`False`),
    html`Loading...`,
  )}
  `;
}