小白系列Vite-Vue3-TypeScript：007-配置axios并封装api

import axios from 'axios';
import { ElMessage } from 'element-plus';
 
// 创建axios实例
const service = axios.create({
  baseURL: import.meta.env.VITE_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 => {
    const res = response.data;
    // 根据返回的状态码做相应处理，例如401未授权等
    return res;
  },
  error => {
    ElMessage({
      message: '请求出错',
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);
 
// 导出axios实例
export default service;

这个代码实例展示了如何在Vue 3项目中使用TypeScript配置axios，并对请求和响应进行拦截处理。同时，使用了element-plus的ElMessage组件来显示错误信息。这是一个简洁且实用的axios配置示例。