DJKB/my-vue-app/src/utils/https.js

import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '@/router'
import { useUserStore } from '@/stores/user'

// 创建axios实例
const service = axios.create({
  baseURL: 'http://192.168.15.54:8890' || '', // API基础路径，支持完整URL
  timeout: 15000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    console.log('发送请求:', config)
    
    // 添加token到请求头
    const userStore = useUserStore()
    const token = userStore.token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    // 添加时间戳防止缓存
    if (config.method === 'get') {
      config.params = {
        ...config.params,
        _t: Date.now()
      }
    }
    
    // 显示加载状态
    if (config.showLoading !== false) {
      // 可以在这里添加全局loading
      console.log('显示加载中...')
    }
    
    return config
  },
  error => {
    // 对请求错误做些什么
    console.error('请求错误:', error)
    ElMessage.error('请求发送失败')
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 隐藏加载状态
    console.log('隐藏加载中...')
    
    // 对响应数据做点什么
    console.log('收到响应:', response)
    
    const { data, status } = response
    
    // HTTP状态码检查
    if (status === 200) {
      // 根据后端返回的数据结构进行判断
      if (data.code === 200 || data.success === true) {
        // 请求成功
        return data
      } else if (data.code === 401) {
        // token过期或无效
        ElMessage.error('登录已过期，请重新登录')
        const userStore = useUserStore()
        userStore.logout()
        router.push('/login')
        return Promise.reject(new Error('登录已过期'))
      } else if (data.code === 403) {
        // 权限不足
        ElMessage.error('权限不足，无法访问')
        return Promise.reject(new Error('权限不足'))
      } else {
        // 其他业务错误
        const errorMsg = data.message || data.msg || '请求失败'
        ElMessage.error(errorMsg)
        return Promise.reject(new Error(errorMsg))
      }
    } else {
      ElMessage.error('网络请求失败')
      return Promise.reject(new Error('网络请求失败'))
    }
  },
  error => {
    // 隐藏加载状态
    console.log('隐藏加载中...')
    
    // 对响应错误做点什么
    console.error('响应错误:', error)
    
    let errorMessage = '网络错误'
    
    if (error.response) {
      // 服务器返回了错误状态码
      const { status, data } = error.response
      
      switch (status) {
        case 400:
          errorMessage = data.message || '请求参数错误'
          break
        case 401:
          errorMessage = '登录已过期，请重新登录'
          const userStore = useUserStore()
          userStore.logout()
          router.push('/login')
          break
        case 403:
          errorMessage = '权限不足，无法访问'
          break
        case 404:
          errorMessage = '请求的资源不存在'
          break
        case 500:
          errorMessage = '服务器内部错误'
          break
        case 502:
          errorMessage = '网关错误'
          break
        case 503:
          errorMessage = '服务不可用'
          break
        case 504:
          errorMessage = '网关超时'
          break
        default:
          errorMessage = data.message || `请求失败 (${status})`
      }
    } else if (error.request) {
      // 请求已发出但没有收到响应
      errorMessage = '网络连接超时，请检查网络'
    } else {
      // 其他错误
      errorMessage = error.message || '请求失败'
    }
    
    ElMessage.error(errorMessage)
    return Promise.reject(error)
  }
)

// 封装常用的请求方法
const http = {
  // GET请求
  get(url, params = {}, config = {}) {
    return service({
      method: 'get',
      url,
      params,
      ...config
    })
  },
  
  // POST请求
  post(url, data = {}, config = {}) {
    return service({
      method: 'post',
      url,
      data,
      ...config
    })
  },
  
  // PUT请求
  put(url, data = {}, config = {}) {
    return service({
      method: 'put',
      url,
      data,
      ...config
    })
  },
  
  // DELETE请求
  delete(url, params = {}, config = {}) {
    return service({
      method: 'delete',
      url,
      params,
      ...config
    })
  },
  
  // PATCH请求
  patch(url, data = {}, config = {}) {
    return service({
      method: 'patch',
      url,
      data,
      ...config
    })
  },
  
  // 文件上传
  upload(url, formData, config = {}) {
    return service({
      method: 'post',
      url,
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      ...config
    })
  },
  
  // 文件下载
  download(url, params = {}, config = {}) {
    return service({
      method: 'get',
      url,
      params,
      responseType: 'blob',
      ...config
    })
  }
}

// 导出axios实例和封装的方法
export default http
export { service }