Skip to main content
2 de 2
se añadieron 154 caracteres en el cuerpo
gaidyjg
  • 774
  • 1
  • 8
  • 20

Algo me dice que por querer hacer más, estás haciendo menos. Es decir, no tienes por qué manejar las cabeceras por separado en una consulta axios, si no recuerdo mal, por defecto, la cabecera de axios de content type es precisamente para enviar datos json. De todas formas, si lo que quieres es mantener cabeceras homogéneas en todas tus consultas, solo debes crear una instancia de axios y trabajar con esa instancia para manejar las consultas, es decir algo como esto:

const instance = axios.create({
   headers: {
    'Content-Type': 'application/json'
   }
})

let btn = document.querySelector('button');

btn.addEventListener('click', () =>{
  instance.post('https://reqres.in/api/login', {
    email: '[email protected]',
    password: 'cityslicka'
  }).then(res => {
      if(res.data.token) {
        instance.get('https://reqres.in/api/users/2')
          .then(res => {
            const div = document.querySelector('div')
            
            div.innerHTML = `Usuario ${res.data.data.first_name} ${res.data.data.last_name} Logueado`
          })
          .catch(err => console.error(err))
      }
    })
  .catch(err => console.error(err))
})
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<button>Click para doble consulta</button>

<div style="margin: 2rem auto;"></div>

Igualmente te dejo un ejemplo de cómo sin editar las cabeceras, axios automáticamente trabaja todo con cabeceras application/json y todo funciona correctamente en una doble consulta POST -> GET. Eso suponiendo que toda la información que proporcionas sea correcta

let btn = document.querySelector('button');

btn.addEventListener('click', () =>{
  axios.post('https://reqres.in/api/login', {
    email: '[email protected]',
    password: 'cityslicka'
  }).then(res => {
      if(res.data.token) {
        axios.get('https://reqres.in/api/users/2')
          .then(res => {
            const div = document.querySelector('div')
            
            div.innerHTML = `Usuario ${res.data.data.first_name} ${res.data.data.last_name} Logueado`
          })
          .catch(err => console.error(err))
      }
    })
  .catch(err => console.error(err))
})
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<button>Click para doble consulta</button>

<div style="margin: 2rem auto;"></div>

gaidyjg
  • 774
  • 1
  • 8
  • 20