Skip to main content
se añadieron 154 caracteres en el cuerpo
Origen Enlace
gaidyjg
  • 774
  • 1
  • 8
  • 20
const instance = axios.create({
    headers: {
    'Content-Type': 'application/json'
   }
})

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

btn.addEventListener('click', () =>{
  instance.post('https://reqres.in/api/users'login', {
    nameemail: 'Gaidy Gomez''[email protected]',
    jobpassword: 'Development Web''cityslicka'
  }).then(res => {
      if(res.data.token) {
        instance.get(`https'https://reqres.in/api/users/2`2')
          .then(res => {
        let    const div = document.querySelector('div');

        div.innerHTML = `Se ha creado 
 correctamente el usuario         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>
let btn = document.querySelector('button');

btn.addEventListener('click', () =>{
  axios.post('https://reqres.in/api/users'login', {
    nameemail: 'Gaidy Gomez''[email protected]',
    jobpassword: 'Development Web''cityslicka'
  }).then(res => {
      if(res.data.token) {
        axios.get(`https'https://reqres.in/api/users/2`2')
          .then(res => {
        let    const div = document.querySelector('div');

        div.innerHTML = `Se ha creado 
 correctamente el usuario         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>
const instance = axios.create({
    headers: {
    'Content-Type': 'application/json'
  }
})

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

btn.addEventListener('click', () =>{
  instance.post('https://reqres.in/api/users', {
    name: 'Gaidy Gomez',
    job: 'Development Web'
  }).then(res => {
    instance.get(`https://reqres.in/api/users/2`)
      .then(res => {
        let div = document.querySelector('div');

        div.innerHTML = `Se ha creado correctamente el usuario ${res.data.data.first_name} ${res.data.data.last_name}`
      })
      .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>
let btn = document.querySelector('button');

btn.addEventListener('click', () =>{
  axios.post('https://reqres.in/api/users', {
    name: 'Gaidy Gomez',
    job: 'Development Web'
  }).then(res => {
    axios.get(`https://reqres.in/api/users/2`)
      .then(res => {
        let div = document.querySelector('div');

        div.innerHTML = `Se ha creado correctamente el usuario ${res.data.data.first_name} ${res.data.data.last_name}`
      })
      .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>
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>
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>
Origen Enlace
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/users', {
    name: 'Gaidy Gomez',
    job: 'Development Web'
  }).then(res => {
    instance.get(`https://reqres.in/api/users/2`)
      .then(res => {
        let div = document.querySelector('div');

        div.innerHTML = `Se ha creado correctamente el usuario ${res.data.data.first_name} ${res.data.data.last_name}`
      })
      .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/users', {
    name: 'Gaidy Gomez',
    job: 'Development Web'
  }).then(res => {
    axios.get(`https://reqres.in/api/users/2`)
      .then(res => {
        let div = document.querySelector('div');

        div.innerHTML = `Se ha creado correctamente el usuario ${res.data.data.first_name} ${res.data.data.last_name}`
      })
      .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>