Skip to content

add {#await promise} #228

@fengzilong

Description

@fengzilong

对于一些异步操作,往往需要定义一些临时变量在模板中,来表示异步操作当前的状态

类似这样

{#if pending}
  loading
{#elseif failed}
 { error }
{#else}
 { response }
{/if}
Regular.extend( {
  // ...
  async request() {
    this.data.pending = true
    this.data.failed = false
    this.$update()
    
    try {
      this.data.response = await request( ... )
    } catch ( e ) {
      this.data.failed = true
      this.data.error = e.message
    }

    this.data.pending = false
    this.$update()
  }
} )

当存在多个异步操作的情况下会更加麻烦,this.data上要新增很多临时变量,还要避免变量间的命名冲突,很容易产生bug

有了 await 命令之后:

{#await promise}
  loading
{#then response}
  { response }
{#catch e}
  { e.message }
{/await}

模板就可以拥有这种能力

btw:如果regular能把自定义{#command}的能力开放给开发者的话,会是一个很大的亮点

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions