vue3 ts axios封装与使用

您好！对于Vue 3和TypeScript的结合使用，以及axios的封装与使用，我可以给您一些指导。

首先，您需要在项目中安装Vue 3和axios的依赖包。可以使用以下命令来安装它们：

npm install vue@next axios

接下来，我们可以创建一个axios的封装文件，比如`api.ts`。在这个文件中，我们可以定义一些通用的请求方法，并对其进行封装。以下是一个示例：

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

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

// 添加请求拦截器
instance.interceptors.request.use((config: AxiosRequestConfig) => {
  // 在请求发送之前做一些处理，比如添加token等
  return config;
}, (error: any) => {
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use((response: AxiosResponse) => {
  // 对响应数据进行处理，比如统一处理错误码等
  return response.data;
}, (error: any) => {
  return Promise.reject(error);
});

// 定义通用的请求方法
export const get = (url: string, params?: any) => {
  return instance.get(url, { params });
};

export const post = (url: string, data?: any) => {
  return instance.post(url, data);
};

// 其他请求方法类似...

在Vue组件中使用封装的axios方法时，可以直接引入并调用。例如：

import { defineComponent, ref } from 'vue';
import { get } from './api';

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

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

    return {
      data,
      fetchData
    };
  }
});

上述示例中，我们使用了Vue 3的Composition API来定义组件。在`fetchData`函数中，我们调用了`get`方法来发起GET请求，并将返回的数据赋值给`data`变量。

这只是一个简单的示例，您可以根据实际需要进行更多的封装和处理。希望对您有所帮助！如有任何问题，请随时提问。