vue3+ts+axios 二次封装

在Vue3和TypeScript中，你可以创建一个二次封装axios的例子如下：

首先，安装axios:

npm install axios

然后，创建一个http.ts文件用于封装axios：

import axios from 'axios';
 
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头等信息
    return config;
  },
  error => {
    // 请求错误处理
    console.log(error); // for debug
    Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    const res = response.data;
    // 如果有错误码，则进行错误处理
    return res;
  },
  error => {
    // 响应错误处理
    console.log('err' + error); // for debug
    return Promise.reject(error);
  }
);
 
export default service;

最后，你可以在组件中使用封装后的axios：

import http from '@/path/to/http';
 
export default defineComponent({
  name: 'MyComponent',
  setup() {
    const fetchData = async () => {
      try {
        const response = await http.get('/some-endpoint');
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    };
 
    // 在mounted钩子中调用
    onMounted(() => {
      fetchData();
    });
  }
});

这样，你就完成了axios的二次封装，并在Vue组件中使用了封装后的请求方法。