Vamos criar um arquivo de configuração para gerenciar as requisições HTTP, interceptadores de requisição e resposta.

Arquivo de Configuração: apiService.js

import axios from 'axios'
import router from '../router/index'
import { Notification, ConfirmDialog } from 'ant-design-vue'
import AppUtils from '../utils/helpers'

const servidorBase = 'http://1.1.2.100:12306'
let processandoRequisicao = true

const instanciaAxios = axios.create({
  baseURL: servidorBase,
  timeout: 100000
})

instanciaAxios.interceptors.request.use(config => {
  const tokenUsuario = AppUtils.obterDadosUsuario('token')
  if (tokenUsuario) {
    config.headers.Authorization = `Bearer ${tokenUsuario}`
  }
  return config
}, erro => {
  return Promise.reject(erro)
})

instanciaAxios.interceptors.response.use(resposta => {
  if (resposta.status === 200) {
    if (processandoRequisicao) {
      processandoRequisicao = false
      if (resposta.data.codigo === 401) {
        ConfirmDialog({
          title: 'Sessão Expirada',
          content: 'Sua sessão expirou. Deseja fazer login novamente?',
          okText: 'Reentrar',
          cancelText: 'Cancelar',
          onOk: () => {
            processandoRequisicao = true
            router.push('/login')
            window.sessionStorage.clear()
            location.reload()
          }
        })
      } else if (resposta.data.codigo === 500) {
        processandoRequisicao = true
        Notification.error({
          message: 'Erro do Servidor',
          description: resposta.data.mensagem
        })
        location.reload()
      } else {
        processandoRequisicao = true
        return Promise.resolve(resposta)
      }
    }
  } else {
    processandoRequisicao = true
    return Promise.reject(resposta)
  }
}, erro => {
  console.error(erro)
  return Promise.reject(erro)
})

export default instanciaAxios

Wrapper HTTP: httpClient.js

import apiService from './apiService'

const httpClient = {
  /**
   * Método GET
   * @param {string} endpoint URL do endpoint
   * @param {object} parametros Parâmetros da requisição
   * @returns {Promise} Promessa com a resposta da requisição
   */
  get(endpoint, parametros = {}) {
    const configuracao = {
      method: 'get',
      url: endpoint
    }
    
    if (Object.keys(parametros).length > 0) {
      configuracao.params = parametros
    }
    
    return apiService(configuracao)
  },
  
  /**
   * Método POST
   * @param {string} endpoint URL do endpoint
   * @param {object} dados Dados para envio
   * @returns {Promise} Promessa com a resposta da requisição
   */
  post(endpoint, dados = {}) {
    const configuracao = {
      method: 'post',
      url: endpoint,
      data: dados
    }
    
    return apiService(configuracao)
  },
  
  /**
   * Método PUT
   * @param {string} endpoint URL do endpoint
   * @param {object} dados Dados para atualização
   * @returns {Promise} Promessa com a resposta da requisição
   */
  put(endpoint, dados = {}) {
    const configuracao = {
      method: 'put',
      url: endpoint,
      data: dados
    }
    
    return apiService(configuracao)
  },
  
  /**
   * Método DELETE
   * @param {string} endpoint URL do endpoint
   * @param {object} parametros Parâmetros da requisição
   * @returns {Promise} Promessa com a resposta da requisição
   */
  delete(endpoint, parametros = {}) {
    const configuracao = {
      method: 'delete',
      url: endpoint
    }
    
    if (Object.keys(parametros).length > 0) {
      configuracao.params = parametros
    }
    
    return apiService(configuracao)
  }
}

export default httpClient

Exemplo de API: usuarioService.js

import httpClient from '../http'
import { formatarVazio } from "@/helpers";

const usuarioService = {
  // Listar todos os usuários
  listarUsuarios(parametros) {
    return httpClient.get('/api/usuarios', parametros);
  },
  
  // Obter detalhes de um usuário específico
  obterUsuario(idUsuario) {
    return httpClient.get(`/api/usuarios/${formatarVazio(idUsuario)}`);
  },
  
  // Criar novo usuário
  criarUsuario(dadosUsuario) {
    return httpClient.post('/api/usuarios', dadosUsuario);
  },
  
  // Atualizar usuário existente
  atualizarUsuario(dadosUsuario) {
    return httpClient.put('/api/usuarios', dadosUsuario);
  },
  
  // Remover usuário
  removerUsuario(idUsuario) {
    return httpClient.delete(`/api/usuarios/${idUsuario}`);
  }
}

export default usuarioService;

Utilitário de Formatação: helpers.js

/**
 * Converte valores vazios ou nulos para string vazia
 * @param {any} valor Valor a ser formatado
 * @returns {string} Valor formatado
 */
export function formatarVazio(valor) {
  if (!valor || valor === "undefined" || valor === "null") {
    return "";
  }
  return valor;
}

Utilização do Serviço

Para utilizar os serviços de API, você pode importar as funções específicas:

import { listarUsuarios, obterUsuario } from '@/servicos/usuarioService';

// Ou registrar no arquivo principal para acesso global