项目中对于Axios的二次封装

包括请求拦截、响应拦截

import axios from "axios";
import { message } from 'ant-design-vue';
// import { deepMerge } from "@/assets/js/utils"
const { URL, PORT } = require("@/assets/js/utils/_env.js")

const token = null

function createService() {
  const service = axios.create();
  // 请求拦截
  service.interceptors.request.use(
    config => {
      // config.data && (config.data.t = new Date().getTime())
      // config.params && (config.params.t = new Date().getTime())
      return config
    },
    error => Promise.reject(error)
  )
  // 响应拦截
  service.interceptors.response.use(
    response => {
      const apiData = response.data
      const responseType = response.request?.responseType
      if (responseType === "blob" || responseType === "arraybuffer") return apiData
      switch (apiData.code) {
        case 0:
          return apiData
        case 200:
          return apiData
        case 401:
          // Token 过期时
          return logout()
        default:
          // 未定义 code
          // message.error(apiData.msg)//apiData.info
          return apiData
      }
    },
    error => {
      const status = error.request.status;
      switch (status) {
        case 400:
          error.message = "请求错误"
          break
        case 401:
          // Token 过期时
          // logout()
          break
        case 403:
          error.message = "拒绝访问"
          break
        case 404:
          error.message = "请求地址出错"
          break
        case 408:
          error.message = "请求超时"
          break
        case 500:
          error.message = "服务器内部错误"
          break
        case 501:
          error.message = "服务未实现"
          break
        case 502:
          error.message = "网关错误"
          break
        case 503:
          error.message = "服务不可用"
          break
        case 504:
          error.message = "网关超时"
          break
        case 505:
          error.message = "HTTP 版本不受支持"
          break
        default:
          break
      }
      message.error(error.message)
      return Promise.reject(error)
    }
  )
  return service
}

function createRequest(service, baseURL = null) {
  // const defaultConfig = {
  //   headers: {
  //     "Authorization": token ? token : void 0
  //   },
  //   baseURL: baseURL || URL + PORT,
  // }
  // return config => service(deepMerge(defaultConfig, config || {}))
  return (config = {}) => {
    if (config.headers) {
      config.headers.Authorization = token ? token : void 0
    } else {
      config.headers = { "Authorization": token ? token : void 0 }
    }
    config.baseURL = baseURL || URL + PORT
    return service(config)
  }
}

export const AxiosCreate_8080 = createRequest(createService(), "")
export const AxiosCreate_8084 = createRequest(createService())
export const AxiosCreate_164_8084 = createRequest(createService(), "http://192.168.18.164:8084")

  • 10
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值