渲染异步函数的正确方法是什么？

Question

我有一个函数，可以获取一个对象并通过检查该对象返回一个布尔值。

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

我应该如何在正确的时机输出正确的值？谢谢。

    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

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

您应该等待 Promise 的结果，例如使用

lit-html

的

until

指令:

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

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

Answer 2

如果您更喜欢使用现代的 async/await 语法而不是带有 then() 的显式 Promise，您可以与

until

指令结合使用：

render() {
    return html`
        ${until(
            (async () => {
                const greenListed = await isGreenlisted();
                greenListed ? return html`True` : return html`False`;
            })(),
            html`Loading...`
        )}
    `;
}