Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Obtención y Manejo de APIs en JavaScript | JavaScript Asíncrono e Integración de API
Maestría Avanzada en JavaScript

bookObtención y Manejo de APIs en JavaScript

¿Qué es una API y cómo interactuamos con ella?

Note
Definición

Una API (Interfaz de Programación de Aplicaciones) es un conjunto de reglas y protocolos que permiten que diferentes aplicaciones de software se comuniquen entre sí.

En el desarrollo web, las APIs permiten que tu código JavaScript interactúe con servicios externos, como obtener datos de un servidor, enviar datos de formularios o integrar servicios de terceros.

En aplicaciones modernas de JavaScript, las APIs se utilizan frecuentemente para:

  • Obtener datos de un servidor (por ejemplo, recuperar datos meteorológicos, artículos de noticias o detalles de productos);
  • Enviar datos a un servidor (por ejemplo, enviar un formulario o guardar preferencias de usuario);
  • Trabajar con servicios de terceros (por ejemplo, Google Maps, API de Twitter, pasarelas de pago).

Interactuamos con las APIs enviando solicitudes HTTP a un endpoint de la API, y el servidor responde con datos, normalmente en formato JSON.

Note
Estudiar más

Si eres nuevo en JSON o deseas una comprensión más profunda de cómo funciona, consulta el artículo Understanding and Working with JSON Data

Envío de solicitudes HTTP usando fetch()

La función fetch() es una forma moderna de realizar solicitudes de red en JavaScript. Devuelve una Promesa, que se resuelve cuando la solicitud se completa.

index.html

index.html

index.js

index.js

copy

Este ejemplo ilustra cómo realizar una solicitud HTTP GET a una API utilizando fetch(). La función fetchData envía una solicitud al endpoint especificado (https://jsonplaceholder.typicode.com/posts/1). Una vez que se recibe la respuesta, response.json() analiza los datos JSON. El título de la publicación se extrae de los datos analizados y se muestra en el párrafo HTML.

Manejo de respuestas de API: Analizar JSON y verificar el estado de la respuesta

Después de enviar una solicitud a una API, es importante comprobar si la solicitud fue exitosa y manejar la respuesta adecuadamente. En la mayoría de los casos, los datos devueltos por una API están en formato JSON, por lo que es necesario analizarlos utilizando response.json().

Además, siempre se debe verificar el estado de la respuesta para asegurar que la solicitud fue exitosa (código de estado 200–299).

index.html

index.html

index.js

index.js

copy

Este ejemplo demuestra cómo manejar el estado de la respuesta de una solicitud a una API. La función fetchAndCheckStatus envía una solicitud a un endpoint de API y luego verifica si la respuesta es exitosa utilizando response.ok, que devuelve true para los códigos de estado en el rango 200–299. Si la solicitud es exitosa, los datos JSON se analizan y se muestran. Si la solicitud falla, el código de estado de error se muestra en el HTML.

Manejo de errores con APIs y gestión de fallos de red

Al trabajar con APIs, es fundamental manejar posibles errores como:

  • Fallos de red: El servidor puede no estar disponible debido a problemas de red;
  • Respuestas no válidas: La API puede devolver un error (por ejemplo, 404 Not Found o 500 Server Error).

Se pueden manejar los errores utilizando try...catch junto con fetch() para gestionar tanto los errores de red como los errores de respuesta de la API.

index.html

index.html

index.js

index.js

copy

Este ejemplo muestra cómo manejar errores de API de manera efectiva. La función fetchWithErrorHandling utiliza try...catch para gestionar tanto errores de red como respuestas inválidas de la API. Si la solicitud a la URL inválida falla, o si el código de estado de la respuesta está fuera del rango 200–299, se lanza un error con un mensaje específico. El bloque catch luego muestra el mensaje de error en el HTML. Este método asegura que cualquier problema con la llamada a la API, como un endpoint incorrecto o problemas de conectividad, se gestione de forma adecuada y se comunique claramente al usuario.

1. ¿Qué devuelve la función fetch()?

2. ¿Cuál es el propósito de usar try...catch con fetch()?

question mark

¿Qué devuelve la función fetch()?

Select the correct answer

question mark

¿Cuál es el propósito de usar try...catch con fetch()?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 5

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain how to use the fetch() function in more detail?

What are some common HTTP status codes I should look out for when working with APIs?

How do I handle errors when making API requests in JavaScript?

Awesome!

Completion rate improved to 2.22

bookObtención y Manejo de APIs en JavaScript

Desliza para mostrar el menú

¿Qué es una API y cómo interactuamos con ella?

Note
Definición

Una API (Interfaz de Programación de Aplicaciones) es un conjunto de reglas y protocolos que permiten que diferentes aplicaciones de software se comuniquen entre sí.

En el desarrollo web, las APIs permiten que tu código JavaScript interactúe con servicios externos, como obtener datos de un servidor, enviar datos de formularios o integrar servicios de terceros.

En aplicaciones modernas de JavaScript, las APIs se utilizan frecuentemente para:

  • Obtener datos de un servidor (por ejemplo, recuperar datos meteorológicos, artículos de noticias o detalles de productos);
  • Enviar datos a un servidor (por ejemplo, enviar un formulario o guardar preferencias de usuario);
  • Trabajar con servicios de terceros (por ejemplo, Google Maps, API de Twitter, pasarelas de pago).

Interactuamos con las APIs enviando solicitudes HTTP a un endpoint de la API, y el servidor responde con datos, normalmente en formato JSON.

Note
Estudiar más

Si eres nuevo en JSON o deseas una comprensión más profunda de cómo funciona, consulta el artículo Understanding and Working with JSON Data

Envío de solicitudes HTTP usando fetch()

La función fetch() es una forma moderna de realizar solicitudes de red en JavaScript. Devuelve una Promesa, que se resuelve cuando la solicitud se completa.

index.html

index.html

index.js

index.js

copy

Este ejemplo ilustra cómo realizar una solicitud HTTP GET a una API utilizando fetch(). La función fetchData envía una solicitud al endpoint especificado (https://jsonplaceholder.typicode.com/posts/1). Una vez que se recibe la respuesta, response.json() analiza los datos JSON. El título de la publicación se extrae de los datos analizados y se muestra en el párrafo HTML.

Manejo de respuestas de API: Analizar JSON y verificar el estado de la respuesta

Después de enviar una solicitud a una API, es importante comprobar si la solicitud fue exitosa y manejar la respuesta adecuadamente. En la mayoría de los casos, los datos devueltos por una API están en formato JSON, por lo que es necesario analizarlos utilizando response.json().

Además, siempre se debe verificar el estado de la respuesta para asegurar que la solicitud fue exitosa (código de estado 200–299).

index.html

index.html

index.js

index.js

copy

Este ejemplo demuestra cómo manejar el estado de la respuesta de una solicitud a una API. La función fetchAndCheckStatus envía una solicitud a un endpoint de API y luego verifica si la respuesta es exitosa utilizando response.ok, que devuelve true para los códigos de estado en el rango 200–299. Si la solicitud es exitosa, los datos JSON se analizan y se muestran. Si la solicitud falla, el código de estado de error se muestra en el HTML.

Manejo de errores con APIs y gestión de fallos de red

Al trabajar con APIs, es fundamental manejar posibles errores como:

  • Fallos de red: El servidor puede no estar disponible debido a problemas de red;
  • Respuestas no válidas: La API puede devolver un error (por ejemplo, 404 Not Found o 500 Server Error).

Se pueden manejar los errores utilizando try...catch junto con fetch() para gestionar tanto los errores de red como los errores de respuesta de la API.

index.html

index.html

index.js

index.js

copy

Este ejemplo muestra cómo manejar errores de API de manera efectiva. La función fetchWithErrorHandling utiliza try...catch para gestionar tanto errores de red como respuestas inválidas de la API. Si la solicitud a la URL inválida falla, o si el código de estado de la respuesta está fuera del rango 200–299, se lanza un error con un mensaje específico. El bloque catch luego muestra el mensaje de error en el HTML. Este método asegura que cualquier problema con la llamada a la API, como un endpoint incorrecto o problemas de conectividad, se gestione de forma adecuada y se comunique claramente al usuario.

1. ¿Qué devuelve la función fetch()?

2. ¿Cuál es el propósito de usar try...catch con fetch()?

question mark

¿Qué devuelve la función fetch()?

Select the correct answer

question mark

¿Cuál es el propósito de usar try...catch con fetch()?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 5
some-alt