等待异步函数在 Vue 可组合项中完成，然后再读取其内容

Question

我编写了多个可组合项，它们将从我在组件中使用的 API 中获取特定对象。我需要将一个可组合项中的对象与另一个可组合项中的对象关联起来。不过，我想保持可组合项中的提取异步，以便组件在启动第二个组件之前不会等待第一个组件完成。

当 API 查询尚未完成且值尚未设置，但组件尝试迭代其值时，就会出现问题。

我怎样才能完成这个任务？

我到目前为止的代码如下：

组件代码：

const { customers } = useCustomers()
const { datacenters } = useDatacenters()

for (let customer of customers.value) {
  customer.datacenters = datacenters.filter(datacenter => datacenter.customer === customer.id)
}

可组合代码：

function useCustomers() {
  const customers = ref([])

  async function updateCustomers(){
    customers.value = (await api.get("customers")).json
  }

  onMounted(() => {
    void updateCustomers()
  })

  return {
    customers,
    updateCustomers,

  }
}

function useDatacenters() {
  const datacenters = ref([])

  async function updateDatacenters() {
    datacenters.value = (await api.get("datacenter")).json
  }

  onMounted(() => {
    void updateDatacenters()
  })

  return {
    datacenters,
    updateDatacenters
  }
}

Answer 1

1. 您应该注意加载可组合项。检查数组的长度，或者例如使用

   null

   :
初始化它们

const customers = ref(null)

1. 然后只为两者加载：

watch([customers, datacenters], () => {
  if(!customers.value || !datacenters.value) return; // not loaded yet
  for (let customer of customers.value) {
    customer.datacenters = datacenters.value.filter(datacenter => datacenter.customer === customer.id)
  }
});