Exemplo de uso de axios

axiosService.js

import axios from "axios";
import { buildAxiosConfig } from "./configUtils.js";

// ------------------ AXIOS

export const fazerLogin = (usuario, senha) => {
  const dados = {
    username: usuario,
    password: senha,
  };

  return axios.post("https://connectlab.onrender.com/auth/login", dados);
};

export const buscarListaDispositivos = () => {
  return axios.get("http://localhost:3030/devices", buildAxiosConfig());
};

export const buscarUsuario = () => {
  return axios.get("http://localhost:3030/usuario", buildAxiosConfig());
};

configUtils.js

// ------------------ AXIOS

export const buildAxiosConfig = () => {
  const token = localStorage.getItem("meutoken");

  if (!token) {
    throw new Error("O token não está no localStorage!!");
  }

  const requestConfig = {
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${token}`,
    },
  };

  return requestConfig;
};

// ------------------ FECTH

// Função que monta os headers para o fetch.
// No fetch, precisamos colocar na config o método HTTP.
// Para facilitar o trabalho, vamos receber o método
// via argumento
export const buildFetchConfig = (method) => {
  const token = localStorage.getItem("meutoken");

  if (token) {
    // a classe Headers faz parte do java script e serve
    // para montarmos os metadados Headers do fetch
    const headers = new Headers();
    // sintaxe para declarar as chaves e valores
    headers.set("Authorization", `Bearer ${token}`);
    headers.set("Content-Type", `application/json`);

    // retornamos o objeto de configuração
    return {
      method,
      headers,
    };
  }
};

fetchService.js

import { buildFetchConfig } from "./configUtils.js";

// ------------------ FECTH

export const fazerLogin = (usuario, senha) => {
  const dados = {
    username: usuario,
    password: senha,
  };
  
  // exemplo sem utilizar a nossa função de config
  const fetchConfig = {
    body: JSON.stringify(dados) // no fetch, precisamos transformar os dados em string!
  }
  return fetch("https://connectlab.onrender.com/auth/login", fetchConfig).then(res => res.json());
};

export const buscarListaDispositivos = () => {
  // exemplo utilizando a nossa função de config
  const config = buildFetchConfig("GET");
  return fetch("http://localhost:3030/devices", config).then(res => res.json());
};

export const buscarUsuario = () => {
  // exemplo utilizando a nossa função de config
  const config = buildFetchConfig("GET");
  return fetch("http://localhost:3030/usuario", config).then(res => res.json());
};