[英]What is the proper way to render an async function?
I have a function that fetches an object and returns a boolean from a check on the said object.我有一个 function,它获取一个 object,并从对所述 object 的支票中返回一个 boolean。
I need this boolean to decide what HTML should be the output of my render() function. When the function that checks the fetched object is called in my render() function, it always returns "undefined", as it always evaluates to true.我需要这个 boolean 来决定什么 HTML 应该是我的 render() function 的 output。当检查获取的 object 的 function 在我的 render() 8834809084065 中被调用时,它总是返回 true 定义为“8834809uns,5”,
How should I proceed to output the correct value in proper timing?我应该如何在适当的时间进入 output 正确的值? Thank you.
谢谢你。
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>
`;
}
}
isGreenlisted()
returns a Promise
so in the ternary operator you're essentially evaluating the promise itself instead of the value it will resolve to, and since class instances are truthy , the first template is always shown. isGreenlisted()
返回一个Promise
,所以在三元运算符中,您实际上是在评估 promise 本身,而不是它将解析为的值,并且由于 class 实例是真实的,因此始终显示第一个模板。
You should instead wait for the result of the promise, for example by using lit-html
's until
directive :您应该等待 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...`,
)}
`;
}
I have a function that fetches an object and returns a boolean from a check on the said object.我有一个 function ,它获取一个 object 并通过对上述 ZA8CFDE6331BD59EB26ZF94 的检查返回一个 boolean。
I need this boolean to decide what HTML should be the output of my render() function.我需要这个 boolean 来决定 HTML 应该是我的渲染的 output()ZC1C425268E68385D1AB507。 When the function that checks the fetched object is called in my render() function, it always returns "undefined", as it always evaluates to true.
当在我的 render() function 中调用检查获取的 object 的 function 时,它总是返回“未定义”,因为它总是评估为真。
How should I proceed to output the correct value in proper timing?我应该如何在适当的时机进入 output 正确的值? Thank you.
谢谢你。
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>
`;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.