当前位置：首页 > article >正文

vue3 mounted 中调用异步函数

article 2025/3/1 10:57:06

在 Vue 3 中，如果你想要在 mounted 生命周期钩子中调用异步函数，你可以直接在 onMounted 钩子内部调用这个异步函数。通常情况下，你会希望处理异步操作的结果或错误，并确保在组件卸载时取消这些操作。下面是一个简单的例子，展示如何在 mounted 钩子中调用异步函数，并处理可能的结果或错误：

 import { onMounted, ref } from 'vue'

export default {
  setup() {
    const data = ref(null);
    const loading = ref(true);
    const error = ref(null);

    const fetchData = async () => {
      try {
        // 假设 fetchSomeData 是一个返回 Promise 的异步函数
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        if (result) {
          data.value = result;
        }
      } catch (err) {
        error.value = err.message;
      } finally {
        loading.value = false;
      }
    };

    // 在组件挂载完成后执行
    onMounted(fetchData);

    return { data, loading, error };
  }
}

在这个例子中：

我们定义了一个名为 fetchData 的异步函数来模拟数据请求。
onMounted 被用来确保在组件挂载后立即调用 fetchData。
使用 try…catch…finally 结构来处理可能发生的错误，并且无论是否成功都会设置 loading 为 false。
data 和 error 变量会被更新以反映请求的状态。

如果你的异步操作需要取消机制，例如在组件卸载时取消一个正在进行的网络请求，你可以使用 AbortController。

下面是如何结合 AbortController 来取消请求的例子：

import { onMounted, onUnmounted, ref } from 'vue';

export default {
  setup() {
    const data = ref(null);
    const loading = ref(true);
    const error = ref(null);
    let abortController = null;

    const fetchData = async () => {
      abortController = new AbortController();
      try {
        const response = await fetch('https://api.example.com/data', { signal: abortController.signal });
        const result = await response.json();
        if (result) {
          data.value = result;
        }
      } catch (err) {
        if (!err.name.includes('AbortError')) {
          error.value = err.message;
        }
      } finally {
        loading.value = false;
      }
    };

    onMounted(fetchData);

    // 在组件卸载时取消请求
    onUnmounted(() => {
      if (abortController) {
        abortController.abort(); // 取消请求
      }
    });

    return { data, loading, error };
  }
}