带有微调器的 Alpinejs 异步计算属性

Question

我有一个范围滑块输入，它应该触发一个异步计算属性来显示。在等待响应时，我想显示一个微调器。请看下面我想出的。我觉得我把事情复杂化了，有时微调器和生成的标题会同时显示（！）。有没有更好的方法来使用 Alpinejs 进行异步计算道具？

<script src="//unpkg.com/alpinejs" defer></script>

<script>
  async function getTitle(id) {
    const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
    const data = await response.json();

    await new Promise(resolve => setTimeout(resolve, 2500)) // adds some extra slowness

    return data.title.toUpperCase()
  }
</script>

<div x-data="{ todoId: 10, title: 'A PRELODED TODO TITLE' }">
    <h3>Title formatter</h3>
    <p>Grab a todo via API and uppercases title </p>
    <input x-model="todoId" x-on:change="console.log('change!'); title = null" id="steps-range" type="range" min="0" max="50" step="1">
    <div x-show="title !== null" x-html="title ?? (title = (await getTitle(todoId)))"></div>
    <div x-show="title === null">Loading ...</div>
</div>

JSFIDDLE

Answer 1

我已经调整了您的示例以显示处理相同问题的不同方法，它在 Alpine.js 方面进行了简化，并且我已经调整了您的功能以帮助解决标签问题。

<script src="//unpkg.com/alpinejs" defer></script>
<style>
  .error {
    color: red;
  }
  
  .success {
    color: blue;
  }
  
  .loading {
    color: orange;
  }
</style>
<div x-data="{
          todoId: 10,
          title: 'A PRELODED TODO TITLE',
          error: false,
          loading: false,
                async getTitle(id) {
              this.success = true
              this.error = false
              this.loading = true
                this.title = 'Loading ...'
                    await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
                    .then(res => res.json())
                    .then(async(res) => {
                    await new Promise(resolve => setTimeout(resolve, 100)) // adds some extra slowness
                if(res.id === parseInt(this.todoId)) {
                  this.loading = false
                  this.success = true
                    this.title = res.title.toUpperCase()
                 }
                return
                    }).catch((e) => {
                  this.loading = false
                  this.title = e.message
                  this.error = true
              })
            }

}" x-init="$watch('todoId', (newValue, oldValue) => {
                    newValue != oldValue ? $nextTick(async() => { getTitle(todoId) }) : null
               })">
  <h3>Title formatter</h3>
  <p>Grab a todo via API and uppercases title</p>
  <input x-model="todoId" id="steps-range" type="range" min="0" max="50" step="1" />
  <div x-show="title" :class="{'error': error, 'success': !error, 'loading': loading}" x-html="title"></div>
</div>