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：
Vue3是一种流行的JavaScript框架，而TypeScript是一种类型安全的JavaScript的超集。封装axios是为了更好地与后端API进行通信，并提供统一的方式来管理HTTP请求。

首先，我们需要安装axios和@types/axios（TypeScript声明文件）包。然后，我们可以创建一个axios实例并导出一个封装的函数。

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

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

// 请求拦截器
instance.interceptors.request.use((config: AxiosRequestConfig) => {
  // 在发送请求前做些什么，例如给请求头加上token
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
  return config;
}, (error) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use((response: AxiosResponse) => {
  // 对响应数据做些什么
  return response.data;
}, (error) => {
  // 对响应错误做些什么
  return Promise.reject(error);
});

// 请求封装函数
const request = (config: AxiosRequestConfig) => {
  return instance.request(config);
};

export default request;

上述代码中，我们首先创建了一个axios实例，并配置了基础URL和请求超时时间。然后，我们添加了一个请求拦截器和一个响应拦截器。在请求拦截器中，我们可以对请求进行一些处理，例如添加请求头。在响应拦截器中，我们可以对响应进行一些处理，例如提取响应数据。

最后，我们封装了一个请求函数，它接收一个AxiosRequestConfig对象作为参数，并使用axios实例的request方法发送请求。

这样，我们就可以在Vue组件中通过导入封装的axios函数来发送HTTP请求，例如：

import request from './request';

// 发送GET请求
request({ method: 'get', url: '/users' })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

// 发送POST请求
request({ method: 'post', url: '/users', data: { name: 'John' } })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

这样，我们就成功地封装了axios，并可以在Vue3中使用TypeScript编写的代码来发送HTTP请求。

### 回答3：
Vue3是Vue.js的下一个主要版本，它引入了许多新的特性和改进，使开发更加便捷和高效。而TypeScript是JavaScript的超集，为JS提供了静态类型检查和更好的开发工具支持。封装axios是将axios封装成可复用的组件，方便在Vue3中使用。

首先，我们需要安装axios和@types/axios（TypeScript类型定义文件）。可以通过npm或者yarn进行安装。

然后，在Vue组件的script标签中导入axios和Vue，以及相关的类型定义文件：

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

接下来，我们可以创建一个封装了axios的自定义函数，名为request。这个函数可以接收一个配置对象，包括请求的URL、方法、参数等。request函数返回一个Promise，可通过.then和.catch进行处理。

const request = (config: AxiosRequestConfig): Promise<AxiosResponse> => {
  return new Promise((resolve, reject) => {
    axios(config)
      .then((res: AxiosResponse) => {
        resolve(res);
      })
      .catch((error: any) => {
        reject(error);
      });
  });
};

接下来，我们可以在Vue组件中使用封装的axios。例如，在mounted生命周期中发送GET请求并处理返回结果：

export default defineComponent({
  mounted() {
    request({
      url: 'https://api.example.com/users',
      method: 'GET',
    })
      .then((res: AxiosResponse) => {
        // 处理返回数据
      })
      .catch((error: any) => {
        // 处理错误
      });
  },
});

通过以上步骤，我们成功地在Vue3中封装了axios，并且可以在组件中方便地使用它发送请求和处理结果。这样的封装使得代码更简洁、可维护性更高，同时也提供了更好的类型检查和开发工具支持，提升了开发效率。