Integración de APIs en Aplicaciones JavaScript
Al trabajar con APIs, los métodos HTTP más comunes son GET y POST:
- GET: Utilizado para recuperar datos de un servidor;
- POST: Utilizado para enviar datos a un servidor, normalmente al enviar formularios o datos en formato JSON.
Ejemplo de solicitud GET
Una solicitud GET obtiene datos de un servidor sin modificar ningún recurso.
index.html
index.js
La función fetchPost utiliza el método fetch() para enviar una solicitud a un endpoint especificado (/posts/1). Una vez que se recibe la respuesta, los datos se analizan como JSON y el título de la publicación se extrae y muestra en el párrafo HTML.
Ejemplo de solicitud POST
Una solicitud POST envía datos al servidor, utilizada frecuentemente para crear nuevos recursos o enviar datos de formularios.
index.html
index.js
La función sendPostRequest realiza una solicitud al endpoint especificado (/posts) con el method configurado como 'POST'. Los encabezados incluyen 'Content-Type': 'application/json' para indicar que se están enviando datos en formato JSON. El body contiene datos en formato JSON con los detalles para una nueva publicación, como title, body y userId. Después de la solicitud, la respuesta del servidor se analiza como JSON y el título de la publicación creada se muestra en el HTML.
Envío de encabezados y manejo de diferentes métodos HTTP (GET, POST, PUT, DELETE)
Los diferentes métodos HTTP cumplen distintas funciones. Además de GET y POST, los métodos comunes incluyen:
- PUT: Utilizado para actualizar un recurso existente;
- DELETE: Utilizado para eliminar un recurso del servidor.
También se pueden enviar encabezados con cualquier método HTTP para proporcionar información adicional, como tokens de autenticación o el tipo de contenido.
Ejemplo de solicitud PUT: Actualización de datos
index.html
index.js
La función updatePost envía una solicitud PUT al endpoint especificado (/posts/1) para actualizar una publicación existente. La solicitud incluye method: 'PUT' para especificar la acción de actualización, y los headers se configuran para incluir 'Content-Type': 'application/json', indicando el formato JSON. El body contiene datos en formato JSON, incluyendo un id, el title actualizado, el body y el userId. Una vez recibida la respuesta, se analiza como JSON y el título actualizado se muestra en el HTML.
Ejemplo de solicitud DELETE: Eliminación de datos
index.html
index.js
La función deletePost envía una solicitud DELETE a un endpoint específico (/posts/1) para eliminar una publicación concreta. El parámetro method: 'DELETE' especifica la acción. Tras la solicitud, el estado de la respuesta se verifica con response.ok: si es exitosa, se muestra un mensaje de éxito ("Publicación eliminada correctamente.") en el HTML. Si la eliminación falla, aparece un mensaje de error en su lugar.
Uso de parámetros de consulta en solicitudes API
Los parámetros de consulta permiten enviar información adicional en la URL, como filtrar datos, ordenar resultados o especificar números de página en respuestas paginadas.
Solicitud GET con parámetros de consulta
index.html
index.js
La función fetchPostsByUser envía una solicitud a un endpoint de API con un parámetro de consulta (userId=1), que filtra las publicaciones para mostrar solo aquellas que pertenecen al usuario especificado. El userId se agrega directamente a la URL como un parámetro de consulta. Después de recibir los datos filtrados, la función muestra en el HTML la cantidad de publicaciones encontradas para ese usuario.
1. ¿Qué método HTTP se utilizaría para obtener datos de un servidor sin modificar ningún recurso?
2. ¿Cuál de las siguientes opciones confirmará una solicitud DELETE exitosa?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Can you explain the difference between GET and POST requests in more detail?
How do I use headers with different HTTP methods?
Can you provide examples of using query parameters in API requests?
Awesome!
Completion rate improved to 2.22Integración de APIs en Aplicaciones JavaScript
Desliza para mostrar el menú
Al trabajar con APIs, los métodos HTTP más comunes son GET y POST:
- GET: Utilizado para recuperar datos de un servidor;
- POST: Utilizado para enviar datos a un servidor, normalmente al enviar formularios o datos en formato JSON.
Ejemplo de solicitud GET
Una solicitud GET obtiene datos de un servidor sin modificar ningún recurso.
index.html
index.js
La función fetchPost utiliza el método fetch() para enviar una solicitud a un endpoint especificado (/posts/1). Una vez que se recibe la respuesta, los datos se analizan como JSON y el título de la publicación se extrae y muestra en el párrafo HTML.
Ejemplo de solicitud POST
Una solicitud POST envía datos al servidor, utilizada frecuentemente para crear nuevos recursos o enviar datos de formularios.
index.html
index.js
La función sendPostRequest realiza una solicitud al endpoint especificado (/posts) con el method configurado como 'POST'. Los encabezados incluyen 'Content-Type': 'application/json' para indicar que se están enviando datos en formato JSON. El body contiene datos en formato JSON con los detalles para una nueva publicación, como title, body y userId. Después de la solicitud, la respuesta del servidor se analiza como JSON y el título de la publicación creada se muestra en el HTML.
Envío de encabezados y manejo de diferentes métodos HTTP (GET, POST, PUT, DELETE)
Los diferentes métodos HTTP cumplen distintas funciones. Además de GET y POST, los métodos comunes incluyen:
- PUT: Utilizado para actualizar un recurso existente;
- DELETE: Utilizado para eliminar un recurso del servidor.
También se pueden enviar encabezados con cualquier método HTTP para proporcionar información adicional, como tokens de autenticación o el tipo de contenido.
Ejemplo de solicitud PUT: Actualización de datos
index.html
index.js
La función updatePost envía una solicitud PUT al endpoint especificado (/posts/1) para actualizar una publicación existente. La solicitud incluye method: 'PUT' para especificar la acción de actualización, y los headers se configuran para incluir 'Content-Type': 'application/json', indicando el formato JSON. El body contiene datos en formato JSON, incluyendo un id, el title actualizado, el body y el userId. Una vez recibida la respuesta, se analiza como JSON y el título actualizado se muestra en el HTML.
Ejemplo de solicitud DELETE: Eliminación de datos
index.html
index.js
La función deletePost envía una solicitud DELETE a un endpoint específico (/posts/1) para eliminar una publicación concreta. El parámetro method: 'DELETE' especifica la acción. Tras la solicitud, el estado de la respuesta se verifica con response.ok: si es exitosa, se muestra un mensaje de éxito ("Publicación eliminada correctamente.") en el HTML. Si la eliminación falla, aparece un mensaje de error en su lugar.
Uso de parámetros de consulta en solicitudes API
Los parámetros de consulta permiten enviar información adicional en la URL, como filtrar datos, ordenar resultados o especificar números de página en respuestas paginadas.
Solicitud GET con parámetros de consulta
index.html
index.js
La función fetchPostsByUser envía una solicitud a un endpoint de API con un parámetro de consulta (userId=1), que filtra las publicaciones para mostrar solo aquellas que pertenecen al usuario especificado. El userId se agrega directamente a la URL como un parámetro de consulta. Después de recibir los datos filtrados, la función muestra en el HTML la cantidad de publicaciones encontradas para ese usuario.
1. ¿Qué método HTTP se utilizaría para obtener datos de un servidor sin modificar ningún recurso?
2. ¿Cuál de las siguientes opciones confirmará una solicitud DELETE exitosa?
¡Gracias por tus comentarios!
