vue3axios封装案例

import axios from 'axios'
import { ElMessage } from 'element-plus'
import hostConfig from './config/host';//请求拦截配置
import {exitLogin} from './config/exit';//退出功能逻辑相关
const CancelToken = axios.CancelToken
const source = CancelToken.source()

//   创建axios实例
const INSTANCE = axios.create({...hostConfig})

// 添加请求拦截器
INSTANCE.interceptors.request.use(
  config => {
    config.cancelToken = source.token
    return config
  },
  error => {
    return error
  }
)

const exitCode = [401, 403];
const errCode = [401, 403]
const errText = process.env.NODE_ENV === 'production'? '登录过期，即将前往登录页面': 'dev:token过期'
// 添加响应拦截器
INSTANCE.interceptors.response.use(
  response => {
    if(response.status==200){//如果是正常结果
      if (response.data.code != 1) {//如果是不是正常结果 就抛错误
        ElMessage.error(response.data.message)
      } 
      return response.data
    } else if(exitCode.includes(response.status)) {  
      ElMessage.error(errText)
      source.cancel()
      exitLogin()
      return false
    } else{
      return response
    }
  },
  error => {
    if (axios.isCancel(error)) {// 取消请求的情况下，终端Promise调用链
      return error
    }
    if (error.response && errCode.includes(error.response.status)) {
      ElMessage.error(errText)
      source.cancel()
      exitLogin()
      return error/*  */
    }
    // 对响应错误做点什么`
    if (error.message == "timeout of 30000ms exceeded") {
      ElMessage.error('请求超时，请重试.');
    } else {
      ElMessage.error('网络异常，请稍后重试')
    }
    return error
  }
)

export default INSTANCE