vue3 + typescript 封装axios

### 回答1：
在 Vue 3 中使用 TypeScript 封装 axios 需要遵循以下步骤：

1. 安装 axios 和 @vue/cli-plugin-typescript：

npm install axios @vue/cli-plugin-typescript

2. 在 Vue 项目的 main.ts 中导入 axios 并将其设置为 Vue.prototype 的一个属性，以便在组件中使用时可以直接访问：

import axios from 'axios';

Vue.prototype.$axios = axios;

3. 在需要使用 axios 的组件中导入 axios：

import { AxiosInstance } from 'axios';

export default class MyComponent extends Vue {
  // 声明 $axios 为 AxiosInstance 类型
  private $axios!: AxiosInstance;

  // 在组件中使用 axios
  async someMethod() {
    const response = await this.$axios.get('/some/endpoint');
    // 处理响应
  }
}

这样就可以在 Vue 3 项目中使用 TypeScript 封装 axios 了。

### 回答2：
为了在Vue 3中使用TypeScript来封装Axios，我们可以按照以下步骤进行操作。

首先，我们需要安装axios和@types/axios依赖包。我们可以使用以下命令进行安装：

npm install axios
npm install @types/axios

接下来，我们可以创建一个api.ts文件来封装Axios。在这个文件中，我们可以定义Axios实例，并且可以在我们的项目中复用它。

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

// 创建Axios实例
const instance: AxiosInstance = axios.create({
  baseURL: 'https://api.example.com', // 根据实际情况设置基础URL
});

// 请求拦截器
instance.interceptors.request.use(
  (config: AxiosRequestConfig): AxiosRequestConfig => {
    // 添加请求头等处理逻辑
    return config;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response: AxiosResponse): AxiosResponse => {
    // 处理响应数据等逻辑
    return response;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);

export default instance;

现在，我们可以在Vue组件中使用这个封装的Axios实例。我们可以在组件中导入该实例，并使用它来发送请求。

import { defineComponent } from 'vue';
import api from './api.ts';

export default defineComponent({
  methods: {
    fetchData() {
      api.get('/data')
        .then((response) => {
          // 处理响应数据
        })
        .catch((error) => {
          // 处理错误
        });
    },
  },
});

通过以上步骤，我们成功封装了Axios，并在Vue 3中使用TypeScript进行了使用和复用。这样做可以提高代码的可维护性和可读性，并且方便我们对请求和响应进行统一的处理。

### 回答3：
在Vue3中使用TypeScript封装Axios可以方便地进行网络请求。以下是一个简单的示例：

首先，安装axios和@types/axios包：

npm install axios
npm install @types/axios

然后，创建一个axios实例的封装文件，例如api.ts：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com', // 根据实际情况设置基本URL
  timeout: 5000, // 设置超时时间
});

// 请求拦截器，可以在发送请求之前做一些处理，例如添加token等
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器，可以在接收到响应之后做一些处理，例如统一处理错误等
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    return response.data;
  },
  (error) => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

export default instance;

接下来，在需要使用网络请求的组件中，可以引入此封装文件，并调用相应的方法进行请求：

import { defineComponent } from 'vue';
import api from './api';

export default defineComponent({
  setup() {
    const fetchData = async () => {
      try {
        const response = await api.get('/endpoint'); // 发送GET请求
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    };

    return {
      fetchData
    };
  },
});

这样，就可以在Vue3中使用TypeScript封装Axios进行网络请求了。需要注意的是，上述仅是一个简单的示例，实际开发中可以根据需要进一步封装和处理。