0

Estoy tratando de mostrar por pantalla el resultado de mi fetch, pero no logro mostrar adecuadamente, ya que sale en blanco. Como puedo devolver correctamente el resultado para poder manipularlo y escribir por pantalla ?? suele mostrarse [object Promise] y en el console.log() sale promise <pending>.

let data={
title:"Mi mensaje",
body:"Mensaje de prueba",
userld: 5
}
async function peticion(){

const resp=await
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify(data),
headers: {"Content-type": "application/json; charset=UTF-8"}
});
const json=await resp.json();
return json;
}
peticion();
let $guardar = $("p").html(peticion());
$guardar;
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<p></p>
<body>
</html>

2
  • Al margen del contenido de tu pregunta, si esa línea es en lo único que usas JQuery entonces mejor usa JS puro
    – user128299
    Commented el 18 feb. 2021 a las 1:18
  • Tengo mas codigo en mi proyecto Commented el 18 feb. 2021 a las 9:36

1 respuesta 1

0

Primeramente los fetch devuelven una Promise o PROMESA es como te pido algo y ya ve tu en que momento me la das.

Para resolver una Promise hazlo "thenable" con .then( callback ).then.... Cada then espera un resultado y pone en cola de espera un callback (un función).

let data = {
  title: "Mi mensaje",
  body: "Mensaje de prueba",
  userld: 5
}
async function peticion() {
  return await
  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  }).then(value => value.json()) // Este then no ejecuta hasta que reciba una respuesta, una vez recibida manda el siguiente then a una cola de espera llamadas "Microtareas"
  .then(value => { // Lo mismo pasa con este then
      $("p").html(JSON.stringify(value))
   })
}

peticion()
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<p></p>
<body>
</html>

Aprender Promise al comienza resulta ser confuso pero con práctica y tutoriales se puede. Te recomiendo una video conferencia que es para mí la mejor explicación de como funciona internamente JS, los eventos, las Promise, Microtareas "los then()".jake archibald. Bucles de evento

1
  • Muchas gracias!!! me has ayudado mucho a saber como tratar el contenido con el que trabajo Commented el 18 feb. 2021 a las 10:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.