vue3+ts 封装 axios

Vue 3是一种流行的JavaScript框架，而TypeScript是一种类型安全的JavaScript的超集。封装axios是在Vue 3项目中使用TypeScript来封装axios库，以便更好地管理和使用网络请求。

在Vue 3 + TypeScript中封装axios，可以按照以下步骤进行：

1. 安装axios和@types/axios：

   npm install axios @types/axios

2. 创建一个api.ts文件，用于封装axios请求：

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

   // 创建一个axios实例
   const instance = axios.create({
     baseURL: 'http://api.example.com', // 设置请求的基础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);
     }
   );

   // 封装get请求
   export function get(url: string, params?: any): Promise<any> {
     return instance.get(url, { params });
   }

   // 封装post请求
   export function post(url: string, data?: any): Promise<any> {
     return instance.post(url, data);
   }

3. 在Vue组件中使用封装的axios请求：

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

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

以上就是在Vue 3 + TypeScript中封装axios的基本步骤。通过封装，可以更好地管理和复用网络请求代码，并且可以在请求拦截器和响应拦截器中进行统一处理。同时，使用TypeScript可以提供类型检查和自动补全的功能，提高代码的可靠性和开发效率。