Vue可组合式函数useFetch调用后data始终为null问题求助

这是因为fetch是异步操作，当你调用useFetch后立刻打印data时，网络请求还没完成，data还保持着初始的null值。

解决办法： #

1. 利用Vue响应式自动更新视图

Vue的响应式系统会在data值变化时自动更新视图，直接在模板里根据状态渲染即可：

<template>
  <div v-if="error">请求出错：{{ error.message }}</div>
  <div v-else-if="data">{{ JSON.stringify(data) }}</div>
  <div v-else>加载中...</div>
</template>

2. 在脚本中监听data变化

如果需要在代码逻辑里处理数据更新后的操作，用watch监听data的变化：

<script setup>
import { useFetch } from './fetch.js'
import { watch } from 'vue'

const { data, error } = useFetch('你的目标接口URL')

watch(data, (newData) => {
  if (newData) {
    console.log('数据加载完成：', newData)
  }
})
</script>

3. 让useFetch支持显式等待

修改可组合函数，添加加载状态和异步方法，方便在脚本中等待请求完成：

// fetch.js
import { ref } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const isLoading = ref(true)

  const fetchData = async () => {
    try {
      const res = await fetch(url)
      data.value = await res.json()
    } catch (err) {
      error.value = err
    } finally {
      isLoading.value = false
    }
  }

  fetchData()

  return { data, error, isLoading, fetchData }
}

调用时可通过监听加载状态等待数据就绪：

<script setup>
import { useFetch } from './fetch.js'
import { watch } from 'vue'

const { data, error, isLoading } = useFetch('你的目标接口URL')

// 等待数据加载完成后再打印
const unwatch = watch(isLoading, (val) => {
  if (!val) {
    console.log('数据已加载：', data.value)
    unwatch()
  }
})
</script>

核心逻辑就是：异步操作不会立即返回结果，要借助Vue的响应式特性处理状态变化，或者显式等待异步任务完成。

内容的提问来源于stack exchange，提问作者panthro