Vue3 + TS + Antd + Pinia 从零搭建后台系统 Ajax + Router

// src/api/index.ts
import axios from 'axios';
import { ElMessage } from 'element-plus';
import router from '@/router';
 
// 创建axios实例
const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL, // 配置API接口的基础路径
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头等信息
    return config;
  },
  error => {
    // 请求错误处理
    console.log(error); // for debug
    Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    // 根据返回的状态码做相应处理，例如401未授权等
    if (res.code !== 200) {
      ElMessage({
        message: res.message,
        type: 'error'
      });
      // 以下代码根据实际业务逻辑处理，例如登录状态失效等
      if (res.code === 401) {
        router.push('/login');
      }
      return Promise.reject(new Error(res.message || 'Error'));
    }
    return res;
  },
  error => {
    ElMessage({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);
 
export default service;

这段代码创建了一个axios实例，并设置了基础URL、请求超时时间，以及请求和响应的拦截器。请求拦截器用于在发送请求前做一些处理，如添加token等；响应拦截器用于处理响应，例如状态码的判断、错误处理等。在实际业务中，可以根据项目需求进一步完善和复用这段代码。