vue3项目之对 axios 进行 ts 封装

import axios from 'axios';
import { ElMessageBox, ElMessage } from 'element-plus';
import store from '@/store';
import router from '@/router';
 
// 创建 axios 实例
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API, // api 的 base_url
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加一些配置，例如请求头
    if (store.getters.token) {
      // 如果 token 存在，则在请求头中添加 token
      config.headers['Authorization'] = `Bearer ${store.getters.token}`;
    }
    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'
      });
      // 401: 未登录
      // 未登录则跳转登录页面，并且携带当前页面的路径
      // 在登录页面完成登录后返回当前页面
      if (res.code === 401) {
        ElMessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload(); // 为了重新实例化 vue-router 对象 防止跳转失败
          });
        });
      }
      return Promise.reject('error');
    } else {
      return response.data;
    }
  },
  error => {
    console.log('err' + error); // for debug
    ElMessage({
      message: '服务器异常',
      type: 'error'
    });
    return Promise.reject(error);
  }
);
 
export default service;

这段代码使用了axios库和Element Plus的消息框组件来封装Vue 3项目中的HTTP请求服务。它设置了基础URL、请求超时时间，并且为请求和响应配置了拦截器。在请求拦截器中，它添加了token到请求头中，在响应拦截器中，它处理了不同的状态码，并且在遇到401错误时提示用户重新登录。这是一个简洁且实用的封装示例。