vue3+ts axios封装及使用

import axios from 'axios';
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/store/modules/user';
 
// 创建axios实例
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头等信息
    const userStore = useUserStore();
    if (userStore.token) {
      config.headers['Authorization'] = `Bearer ${userStore.token}`; // 设置请求头
    }
    return config;
  },
  error => {
    // 请求错误处理
    console.log(error); // for debug
    Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    // 根据返回的状态码做相应处理，例如401未授权等
    return res;
  },
  error => {
    ElMessage({
      message: '请求出错',
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);
 
export default service;

这段代码展示了如何在Vue3项目中使用TypeScript结合axios进行HTTP请求的封装。首先创建了一个axios实例，并对请求和响应进行了拦截器的配置。在请求拦截器中，我们可以添加例如Token等认证信息，在响应拦截器中，我们可以处理返回的数据，并对错误情况给出提示。最后，我们将封装好的axios实例导出，以供其他模块使用。