在显示数据之前等待请求完成 - Alpine.js答案

【问题标题】：Wait for request to complete before displaying data - Alpine.js在显示数据之前等待请求完成 - Alpine.js
【发布时间】：2021-09-20 20:58:42
【问题描述】：

我正在努力解决一个计时问题，因为我正在获取的 API 的数据响应在尝试处理数据之前没有完成。

这是我的例子：

### Template

<div class="container mx-auto" x-data="loadIdentities()">
  <template x-for="item in filteredIdentities" :key="item">
    <h6 x-text="item.name"></h6>
    <em x-text="item.role"></em>
  </template>
</div>

### SCRIPT

<script>
  function loadIdentities() {
    return {
      search: "",
      myData: "",
      get filteredIdentities() {
        fetch(`/api_endpoint`)
          .then(res => res.json())
          .then(data => {
            this.myData = data
          }
        )

        var foundIdentities = this.myData.filter((item) => {
          return item.name
            .toLowerCase()
            .includes(this.search.toLowerCase());
        });


        return foundIdentities
      },
    };
  }
</script>

错误：

Uncaught TypeError: this.myForData.filter is not a function

有没有一种好方法可以让我处理 javascript 等待 API 请求完成并从 API 填充数据？

【问题讨论】：

标签： javascript alpine.js

【解决方案1】：

你也可以返回一个空数组，只要没有数据可以显示。

示例：

（这里我使用init() 方法加载一次身份，然后使用getFilteredIdentities 方法进行过滤）

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="//unpkg.com/alpinejs" defer></script>

<div class="p-5 mx-auto" x-data="loadIdentities()">
  <input class="border px-2" placeholder="Filter Identities..." x-model="search"
    x-on:change="setFilteredItentities()" />
  <p class="text-gray-400" x-show="isLoading">Loading Identities...</p>
  <template x-for="item in getFilteredIdentities" :key="item.id">
    <div class="mt-2 flex items-center">
      <h6 x-text="item.first_name"></h6>
      <p class="text-xs text-gray-500 ml-2" x-text="item.email"></p>
    </div>
  </template>
</div>

<script>
  function loadIdentities() {
    return {
      search: "",
      isLoading: false,
      allIdentities: [],
      init() {
        this.isLoading = true
        fetch(`https://reqres.in/api/users`)
          .then(res => res.json())
          .then(data => {
            this.allIdentities = data.data
          })
        this.isLoading = false;
      },
      getFilteredIdentities() {
        if (!this.allIdentities || !this.search) {
          return this.allIdentities
        }
        var result = this.allIdentities.filter((item) => {
          return item.first_name
            .toLowerCase()
            .includes(this.search.toLowerCase());
        })
        return result
      }
    }
  }
</script>

【讨论】：

【解决方案2】：

您可以使用等待。将函数声明为异步，如：异步函数filteredIdentities(){

 const response = await fetch('stuff')
 const data = await response.json()
 return data.filter((item) => 
return item.name
        .toLowerCase()
        .includes(this.search.toLowerCase());
    });
}

该函数返回一个承诺，当它解决时你有一个数组

【讨论】：