vite+vue3在hooks对api接口调用封装

在 Vue 3 中，我们可以使用 `setup()` 函数来替代 Vue 2 中的 `created()` 和 `mounted()` 生命周期函数，同时也可以使用 Composition API 来管理组件内部的状态和逻辑。结合 Vite 的快速开发特性，可以快速实现对 API 接口的封装。

下面是一个简单的示例：

import { reactive, toRefs } from 'vue';

export default function useApi(url) {
  const state = reactive({
    data: null,
    loading: false,
    error: null,
  });

  const fetchData = async () => {
    state.loading = true;
    try {
      const response = await fetch(url);
      state.data = await response.json();
    } catch (e) {
      state.error = e;
    } finally {
      state.loading = false;
    }
  };

  return {
    ...toRefs(state),
    fetchData,
  };
}

在上面的例子中，我们使用 `reactive()` 函数创建一个响应式状态对象 `state`，包含了数据、加载状态和错误信息。然后定义了一个 `fetchData()` 函数，用于异步获取数据，将获取到的数据更新到 `state.data` 中。

最后，使用 `toRefs()` 函数将 `state` 对象中的属性转换成 `ref`，并将 `fetchData()` 函数一并返回，供组件使用。

使用上述封装后，我们可以在组件中这样使用：

<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">{{ error }}</div>
    <div v-else>{{ data }}</div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
import useApi from './useApi';

export default {
  setup() {
    const { data, loading, error, fetchData } = useApi('https://api.example.com/data');

    return {
      data,
      loading,
      error,
      fetchData,
    };
  },
};
</script>

在上面的例子中，我们使用 `useApi()` 函数创建了一个可重用的 API 封装，并在组件的 `setup()` 函数中使用该函数获取数据。然后将 `data`、`loading`、`error` 和 `fetchData` 这些响应式对象解构出来，并在模板中使用它们。

需要注意的是，由于 `setup()` 函数的执行时间早于组件的 `mounted()` 函数，因此在 `setup()` 函数中使用的所有响应式对象都必须使用 `ref()` 或 `toRefs()` 函数进行转换。