在 Vue 项目中封装一个全局通用的 AJAX 请求函数，同时实现 Token 过期自动刷新，一般可以使用 Axios 进行封装，具体步骤如下：

第一步：安装 Axios

如果项目中未安装 axios，先安装它：

npm install axios

第二步：创建 Axios 实例

在 utils/request.js 中封装请求实例：

import axios from 'axios';

// 创建 Axios 实例
const service = axios.create({
  baseURL: 'https://api.example.com', // 你的API基础路径
  timeout: 10000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('access_token'); // 从本地存储获取 Token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`; // 在请求头中携带 Token
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    return response.data;
  },
  async (error) => {
    const originalRequest = error.config;
    
    if (error.response) {
      // 401 表示 Token 过期
      if (error.response.status === 401 && !originalRequest._retry) {
        originalRequest._retry = true; // 避免无限循环刷新 Token
        
        try {
          const newToken = await refreshAccessToken(); // 刷新 Token
          localStorage.setItem('access_token', newToken); // 更新本地 Token
          
          // 重新设置请求头并重新发送请求
          originalRequest.headers.Authorization = `Bearer ${newToken}`;
          return service(originalRequest);
        } catch (err) {
          console.error('刷新 Token 失败，请重新登录');
          logoutUser(); // 退出登录处理
          return Promise.reject(err);
        }
      }
    }
    
    return Promise.reject(error);
  }
);

export default service;

第三步：封装刷新 Token 的逻辑

创建 utils/auth.js 文件，封装 refreshAccessToken 方法：

import axios from 'axios';

// 刷新 Token 的 API
export async function refreshAccessToken() {
  const refreshToken = localStorage.getItem('refresh_token'); // 获取刷新 Token
  if (!refreshToken) {
    throw new Error('无有效刷新 Token');
  }

  try {
    const response = await axios.post('https://api.example.com/auth/refresh', {
      refresh_token: refreshToken,
    });

    return response.data.access_token;
  } catch (error) {
    throw new Error('Token 刷新失败');
  }
}

// 退出登录
export function logoutUser() {
  localStorage.removeItem('access_token');
  localStorage.removeItem('refresh_token');
  window.location.href = '/login'; // 重定向到登录页
}

第四步：在 Vue 组件中使用封装的 Axios

在 Vue 组件中可以这样使用：

import service from '@/utils/request';

async function getUserInfo() {
  try {
    const data = await service.get('/user/info');
    console.log('用户信息:', data);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

总结

1. 创建 Axios 实例，配置 baseURL、超时时间等基本设置。
2. 添加请求拦截器，在请求头中自动携带 access_token。
3. 添加响应拦截器，如果请求返回 401（Token 过期），则自动刷新 Token 并重试请求。
4. 封装 refreshAccessToken 方法，使用 refresh_token 获取新的 access_token，并更新本地存储。
5. 提供 logoutUser 方法，在刷新失败时清除 Token 并跳转到登录页。
6. 在 Vue 组件中直接调用封装的 service 进行 API 请求。

这样就实现了一个 自动处理 Token 过期的全局 AJAX 请求封装，确保用户体验流畅，避免频繁要求重新登录。