Estoy trabajando en un proyecto simple de Javascript que consume datos de la api de Nasa Mars Rover, y usando Immutable Js, funciones puras y programación funcional, muestra imágenes e información en la página usando una tienda para mantener el estado de la aplicación.
El proyecto tiene un servidor back-end que usa Node Express que obtiene mediante async-await, y luego el frontend debe obtener desde el servidor. Soy un novato en el uso de Node Express, y descubro que los datos se muestran como indefinidos en la pestaña Red de Chrome Dev Tools. En la consola parece que se ejecuta la cláusula catch e imprime el error allí. He intentado varias cosas diferentes, pero nada parece funcionar. ¿Por favor ayuda?
Mi tienda inmutable
let store = Immutable.Map({ rovers: Immutable.List(["Curiosity", "Opportunity", "Spirit"]), roverInfo: Immutable.Map({}), });desde mi servidor index.js
// Fetching rover photos from the Mars api app.get('/rovers/:rover', async (req, res) => { const rover = req.params; try { let images = await fetch (`https://api.nasa.gov/mars- photos/api/v1/rovers/${rover}/latest_photos?api_key=${apiKey}`) .then((res) => res.json()); res.send({images}); } catch (error) {console.log('error:', error); } }); // fetching rover info on the selected rover from the Mars api app.get('/manifests/:chosenRover', async (req, res) => { const chosenRover = req.params; try { let data = await fetch (`https://api.nasa.gov/mars-photos/api/v1/manifests/${chosenRover}?api_key=${apiKey}`) .then((res) => res.json()); res.send({data}); } catch (error) {console.log('error:', error); } });desde mi frontend client.js
const roverImage = (store, rover) => { const images = fetch(`http://localhost:3000/rovers/${rover}`) .then((res) => res.json()) .then((rover) => console.log(rover)) .then((rovers) => updateStore(store, { rovers })); // return rovers; }; const getRoverInfo = ( store, chosenRover) => { const roverInfo = fetch(`http://localhost:3000/manifests/${chosenRover}`) .then((res) => res.json()) .then((chosenRover) => console.log(chosenRover)) .then((roverInfo) => updateStore(store, { roverInfo })); // return chosenRover; };actualizar:
Me aconsejaron mostrar ejemplos de los errores, así que aquí están
Req.params devuelve un objeto de valores posibles pasados a través de la url. Por ejemplo: https://test.com/rovers?name=Sojourner&size=25
Si esos fueran mis parámetros, la forma de obtenerlos es la siguiente:
const rover = req.params; console.log(rover.name, rover.size); output: Sojourner 25Lo que está haciendo es pegar el objeto directamente en la URL que está consultando, lo que provoca el error.
Mientras lo hace, su variable móvil tendrá el siguiente valor
{ name: Sojourner, size: 25 }que es un objeto y no una cadena como debería ser.
EDITAR.
Olvidé que estás pasando el parámetro directamente en la url. Y para resolver su problema, simplemente agregue .rover a los req.params.
// Example test API // http://localhost:3000/rovers/curiosity app.get('/rovers/:rover', async (req, res) => { const rover = req.params.rover; try { let images = await fetch (`https://api.nasa.gov/mars- photos/api/v1/rovers/${rover}/latest_photos?api_key=${apiKey}`) .then((res) => res.json()); res.send({images}); } catch (error) {console.log('error:', error); } });Otro ejemplo de https://expressjs.com/en/guide/routing.html
Route path: /users/:userId/books/:bookId Request URL: http://localhost:3000/users/34/books/8989 req.params: { "userId": "34", "bookId": "8989" } req.params.userId: 34 req.params.bookId: 8989