Utilização do axios com JS

Front-end JavaScript
,
#1

Gente, boa noite!

Estou com uma dúvida em relação a utilização do axios em arquivos separados.

estou utilizando o EJS, consegui fazer o axios retornar dados da minha outra API utilizando no mesmo arquivo ejs. Como código abaixo

<body>
<h1>Clientes</h1>
<ul id="clientes">
    
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script>
 axios.get('minhaapi.com/cliente')
    .then(response =>criarLista(response.data))
    .catch(error => console.log(error))

    const criarLista = (clientes)=>{
        const ulClientes = document.getElementById('clientes')
        clientes.map(cliente=>{
            const listaCliente = document.createElement('li')
            listaCliente.innerHTML =
            `Nome: ${cliente.nome_clientes}
            Telefone:${cliente.telefone}`
            ulClientes.appendChild(listaCliente)
        })
    }
</script>

Só que queria deixar ele no arquivo que fosse controlar a requisição. Como um controller.

Eu tenho um arquivo chamado api que utiliza o axios

const axios = require("axios")


const api = axios.create({
    baseURL: "https://minhaapi.com"
})

module.exports = api

e no arquivo que era pra ser o controller tentei assim

const api = require("../services/api")


api.get('/cliente')
    .then(response =>criarLista(response.data))
    .catch(error => console.log(error))


const criarLista = (clientes)=>{
    const ulClientes = document.getElementById('clientes')
    clientes.map(cliente=>{
        const listaCliente = document.createElement('li')
        listaCliente.innerHTML =
        `Nome: ${cliente.nome_clientes}
        Telefone:${cliente.telefone}`
        ulClientes.appendChild(listaCliente)
    })
}

No primeiro exemplo é ele funcionando diretamente no mesmo arquivo. Como faço para colocar em arquivos separados?