vue3中完整封装axios

哦，您好！关于vue3中完整封装axios的问题，我可以和您分享一些想法和建议。

在Vue3中，可以借助Composition API来完整封装Axios。您可以使用use方法创建一个自定义Axios钩子以简化Axios的调用方式。以下是一个示例代码片段：

import axios from 'axios';
import { reactive } from 'vue';

const instance = axios.create({
  baseURL: 'http://api.com',
  timeout: 5000,
});

const useAxios = () => {
  const state = reactive({
    loading: false,
    data: null,
    error: null,
  });

  const fetchData = async (url, options = {}) => {
    state.loading = true;

    try {
      const response = await instance.request({
        url,
        ...options,
      });

      state.data = response.data;
    } catch (error) {
      state.error = error;
    } finally {
      state.loading = false;
    }
  };

  return { state, fetchData };
};

export default useAxios;

在上面的代码中，我们首先通过axios.create()方法创建了一个实例，并设置了一些默认的请求配置。然后，我们使用reactive()将state对象变成响应式的，并定义了一个fetchData()函数来发送请求并更新state中的数据。最后，我们通过返回一个包含状态和fetchData()函数的对象来创建自定义Axios钩子。

我们可以在Vue组件中使用自定义Axios钩子来从后端API中获取数据，如下所示：

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

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

export default {
  setup() {
    const { state, fetchData } = useAxios();

    return {
      state,
      fetchData,
    };
  },
};
</script>

在上面的代码中，我们在组件的setup()函数中调用useAxios()钩子来获得state和fetchData函数。然后，我们将它们导出供组件使用。我们在模板中添加了一个按钮，当单击按钮时，将调用fetchData()函数来获取数据。根据状态渲染相应的UI。

希望这个答案能对您有所帮助！