vue3+ts封装axios包含loading

在Vue 3中使用TypeScript封装axios并包含loading功能的步骤如下：

1. 首先，安装axios和@types/axios依赖：

npm install axios @types/axios

2. 创建一个名为api.ts的文件，用于封装axios请求和loading功能：

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
import { reactive } from 'vue';

// 创建一个loading对象，用于控制loading状态
const loading = reactive({
  isLoading: false,
});

// 创建一个axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置请求的基础URL
  timeout: 5000, // 设置请求超时时间
});

// 请求拦截器，在发送请求之前执行
instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    loading.isLoading = true; // 开启loading状态
    return config;
  },
  (error) => {
    loading.isLoading = false; // 关闭loading状态
    return Promise.reject(error);
  }
);

// 响应拦截器，在接收到响应之后执行
instance.interceptors.response.use(
  (response: AxiosResponse) => {
    loading.isLoading = false; // 关闭loading状态
    return response.data;
  },
  (error) => {
    loading.isLoading = false; // 关闭loading状态
    return Promise.reject(error);
  }
);

// 封装get请求方法
export const get = async <T>(url: string, config?: AxiosRequestConfig): Promise<T> => {
  try {
    const response = await instance.get<T>(url, config);
    return response;
  } catch (error) {
    throw new Error(error);
  }
};

// 封装post请求方法
export const post = async <T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> => {
  try {
    const response = await instance.post<T>(url, data, config);
    return response;
  } catch (error) {
    throw new Error(error);
  }
};

export default {
  loading,
};

3. 在Vue组件中使用封装的axios和loading功能：

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

<script>
import { ref } from 'vue';
import api from './api';

export default {
  setup() {
    const data = ref('');

    const fetchData = async () => {
      try {
        const response = await api.get<string>('/data');
        data.value = response;
      } catch (error) {
        console.error(error);
      }
    };

    return {
      fetchData,
      data,
      ...api,
    };
  },
};
</script>

在上述代码中，我们通过`api.ts`文件封装了axios的get和post请求方法，并使用`reactive`创建了一个loading对象来控制loading状态。在Vue组件中，我们可以直接调用`api.get`或`api.post`方法来发送请求，并通过`api.loading.isLoading`来控制loading的显示与隐藏。