Question

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

我需要这个布尔值来决定应将哪些HTML作为我的render（）函数的输出。在我的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，因此第一个实例模板始终显示。

您应该改为等待诺言的结果，例如通过使用lit-html的{{3}}：

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

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

Answer 2

您应该从属性而不是方法返回的结果进行渲染。因此，isGreenlisted()不应返回布尔值，而应将其保存到已定义的属性中。

要首次执行此方法，请在firstUpdated()生命周期方法中执行。

只要属性进行更改，就会触发 render（） 方法，因此您可以看到在用户界面上进行更改。

import { LitElement, html, css } from 'lit-element';

class DemoElement extends LitElement {

  static get properties() {
    return {
        myVariable: { type: Boolean }
    }
  }

  constructor() {
      super();
      this.myVariable = false;
  }

  firstUpdated() {
      this._isGreenlisted();
  }

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

    _onClick() {
        this.myVariable = !this.myVariable;
    }

    _isGreenlisted() {
        setTimeout(() => {
            fetch('https://jsonplaceholder.typicode.com/todos/1')
                .then(response => response.json())
                .then(json => {
                    if(json.userId === 1) {
                        this.myVariable = true;
                    }
                })
        }, 5000)
    }
}

window.customElements.define('my-element', DemoElement);

您应该看到红色文本，然后在5秒钟内变为绿色。

呈现异步功能的正确方法是什么？

2 个答案: