vue3 ts axios 简单封装

在Vue3中，结合TypeScript和Axios进行HTTP请求的简单封装可以提高代码的可维护性和类型安全性。以下是一个基本的封装示例：

首先，需要安装axios和@types/axios以获取TypeScript支持：

npm install axios @types/axios

然后，在`src/api.ts`文件中创建一个Axios实例并进行基础封装：

import { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

// 创建axios实例，并添加默认配置
const instance: AxiosInstance = axios.create({
  baseURL: process.env.BASE_API_URL, // API的基础URL
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' },
});

instance.interceptors.request.use((config: AxiosRequestConfig) => {
  // 添加请求拦截器
  // 在这里添加通用请求头或者处理其他操作
  return config;
}, (error) => Promise.reject(error));

instance.interceptors.response.use(
  (response: AxiosResponse) => {
    // 解析响应数据，如果需要的话
    return response.data;
  },
  (error) => {
    // 错误处理
    console.error('An error occurred:', error);
    throw error;
  }
);

export default instance; // 导出封装后的axios实例

接下来，在组件中使用这个封装好的axios：

import { useStore } from '@/store';
import { AxiosInstance } from './api'; // 引入axios封装

export default defineComponent({
  setup() {
    const store = useStore();
    const axios = AxiosInstance as AxiosInstance<typeof import('axios')>;

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

    onMounted(fetchData); // 在组件挂载时发起请求

    // 泛型定义方法，自动推断返回类型
    const postData = <T>(url: string, data: any): Promise<T> =>
      axios.post(url, data);

    // 使用自定义的postData方法发送POST请求
    const postDataExample = async () => {
      await postData('/api/users', { name: 'John Doe' });
    };

    return {};
  },
});