Paso 6: Crea rutas de una API

Creación de una ruta que genera un resultado en JSON

Astro también permite generar rutas estáticas con salida en formato JSON.

👀 Si necesitas acceso a sesiones o renderizados más complejos debes activar el modo SSR. Ahora no lo necesitamos.

Crea el archivo ping.json.jsen src/pages y pega estas líneas allí:

export async function get({ params, request }) {
  return {
    body: JSON.stringify({
      pong: true,
      message: 'Te mando un pong'
    }),
  };
}

|

Carga en el navegador la ruta /ping.json de tu entorno local y verás el resultado.

¡Acabas de crear un endpoint (una ruta de API)! 🥳

La extensión .js es la que le dice a Astro que tiene que ejecutar el JavaScript de dentro del fichero, que no es una plantilla. En este caso usamos el método get y por eso nuestra función se llama get. Si te das cuenta es lo mismo que generar páginas estáticas pero con menos florituras.

|

|

💦 Para que lo resuelvas tú

Crea una URL en tu desarrollo en la ruta /api/user.json mediante un fichero con extensión .js.

Vamos a hacer una llamada a una API usando fetch. Te doy el código y todo, para que veas que majo soy :P

  const response = await fetch("https://randomuser.me/api/");
  const data = await response.json()
  const randomUser = data.results[0]; 

|

Lo que necesitamos es que ese endpoint devuelva algo como esto:

{
      name: 'Nombre',
      surname: 'Apellidos',
      location: 'Ciudad',
}

Pero que tome los datos de randomUser.

👀 Recuerda usar la consola con console.log.

👉 Para dar un poco de orden mueve el fichero ping.json.js a la carpeta donde tienes ahora user.json.js.

|

|

🔍 Pistas para resolverlo

• Documentación oficial: Endpoints
• Documentación de la API de RandomUser.me

|

|

🏁 Resolución

Puedes verla en la rama step06.

⚡️ Ahora ya estás listo para pasar al Paso 07.

|