0
229
VistasNo obtener la respuesta deseada de la llamada api en express y node.js
Esta pregunta surge al trabajar con estas tecnologías: React.js | Nodo.js | Express.js | MongoDB
Desarrollé un punto final de API api/events/allevents de la siguiente manera:
router.get('/allevents', async (req, res) => { let success = false; try{ const allevents = await Event.find({}); success = true; res.json({success, allevents}); } catch(err){ res.status(400).json({ success: success, error: "no events found" }); } })Y lo probé en Thunder Client en VS Code y todo perfecto con la siguiente respuesta-
{ "success": true, "allevents": [ { "_id": "62d021d273b4565d056574ac", "title": "The Summer Night", "description": "The Summer Night is a musical night in which singers and bands will perform live.", "address": "New Delhi Auditorium", "city": "New Delhi", "state": "New Delhi", "country": "India", "days": 1, "date": "30/7/2022" } ] }Luego, después de eso, estaba tratando de llamarlo con la siguiente función en un componente React.js de la siguiente manera:
async function fetchAllEvents() { const response = await fetch('/api/events/allevents', { method: 'get', } ); console.log(response); let json = await response.json(); console.log(json); } fetchAllEvents();Y en la consola del navegador Edge, esta es la respuesta:
¿Por qué no recibo la misma respuesta esperada que la anterior en el caso de Thunder Client? Sé que estoy muy cerca de obtener la respuesta correcta, pero no obtengo cuál es ese pequeño error. Me puede ayudar con eso ? También sería de gran ayuda si alguien explica en detalle cómo se comunican entre sí la api endpoint definition y la api call de la API.
Ignore amablemente los errores, ya que es del lado de un principiante :)
1 Respuestas
Responde la pregunta0
Token inesperado < significa que la respuesta es HTML en lugar de JSON, el motivo podría ser otra cosa que el código compartido aquí. Puede identificarlo fácilmente mirando la consola de devtool del navegador / pestaña de red. Al mirar el código aquí, el cambio que debe hacer es,
enviar respuesta como jsonp (muy conveniente en el transporte luego json)
router.get('/allevents', async (req, res) => { let success = false; try{ const allevents = await Event.find({}); success = true; res.jsonp({success, allevents}); } catch(err){ res.status(400).json({ success: success, error: "no events found" }); } }) async function fetchAllEvents() { try { const response = await fetch('/api/events/allevents', { method: 'GET', headers: { 'Content-Type': 'application/json' } } ); console.log(response); let json = await response.json(); console.log(json); } catch(error) { console.error(error) } } fetchAllEvents();