Vue3+Vite+Ts的Axios企业级封装+本地存储封装

以下是针对Vue3+Vite+Ts项目中Axios的企业级封装以及本地存储的封装的示例代码：

// http.ts
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { store } from '@/store/index';
 
// 创建axios实例
const service = axios.create({
  // API的base_url
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 请求超时时间
  timeout: 5000
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头等信息
    if (store.state.user.token) {
      config.headers['Authorization'] = `Bearer ${store.state.user.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;
 
// storage.ts
export const setLocal = <T>(key: string, value: T) => {
  localStorage.setItem(key, JSON.stringify(value));
};
 
export const getLocal = <T>(key: string): T | null => {
  const value = localStorage.getItem(key);
  if (value) {
    return JSON.parse(value);
  }
  return null;
};
 
export const removeLocal = (key: string) => {
  localStorage.removeItem(key);
};

在这个封装中，我们使用axios创建了一个实例，并对请求和响应进行了拦截处理。对于本地存储，我们提供了基本的设置、获取和删除操作，并使用泛型保证了存取数据的类型安全。