Scribd
Cargar
123 vistas12 páginas

16 Fetch Api JavaScript

La instrucción fetch en JavaScript se utiliza para realizar solicitudes HTTP de forma asíncrona y obtener recursos. Fetch toma una URL, devuelve una representación de la respuesta y permite encadenar funciones then, catch y finally para manejar la respuesta, errores y limpieza final. Un ejemplo consume la API de Rick y Morty y construye tarjetas con los datos obtenidos.

Cargado por

Brayan Quintero
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
123 vistas12 páginas

16 Fetch Api JavaScript

La instrucción fetch en JavaScript se utiliza para realizar solicitudes HTTP de forma asíncrona y obtener recursos. Fetch toma una URL, devuelve una representación de la respuesta y permite encadenar funciones then, catch y finally para manejar la respuesta, errores y limpieza final. Un ejemplo consume la API de Rick y Morty y construye tarjetas con los datos obtenidos.

Cargado por

Brayan Quintero
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 12

JAVASCRIPT

FETCH API

Trainer
Ing. Carlos H. Rueda C.
JAVASCRIPT La instrucción "fetch" en JavaScript es una
función incorporada que se utiliza para
FETCH realizar solicitudes de red y recuperar
recursos de forma asíncrona. Se utiliza
principalmente para realizar solicitudes
HTTP a servidores web y obtener
respuestas en formato JSON, HTML, texto u
otros formatos.
JAVASCRIPT La sintaxis básica es:
SINTAXIS fetch(url)
.then(response => response.json())
.then(data => {
// Hacer algo con los datos
})
.catch(error => {
// Manejar el error
})
.finally(() => {
// bloque para hacer ya sea que
ocurrra o no un error.
});
JAVASCRIPT fetch(url)
SINTAXIS
1. Se llama a la función fetch pasando la
URL del recurso que se desea recuperar.
Esto devuelve una representación de la
respuesta HTTP recibida.
JAVASCRIPT .then(response => response.json())
SINTAXIS
2. se encadena una serie de llamadas a los
métodos then(), que se ejecutan cuando
se resuelve correctamente. En el primer
then(), se llama al método json() en el
objeto response para analizar la
respuesta HTTP y obtener los datos en
formato JSON.
JAVASCRIPT .then(data => {
// Hacer algo con los datos
SINTAXIS })

3. En el segundo then(), se puede acceder a


los datos recuperados y realizar las
acciones necesarias en función de ellos.
JAVASCRIPT .catch(error => {
// Manejar el error
SINTAXIS })

4. Si ocurre algún error durante el proceso


de recuperación de datos, se captura
mediante el método catch(), que maneja
el error.
JAVASCRIPT .finally (() => {
// Manejar el error
SINTAXIS })

5. bloque de código que se ejecutará al final


ya sea que ocurra o no ocurra un error.
JAVASCRIPT fetch("https://rickandmortyapi.com/api/character")
.then(result => result.json())
SINTAXIS .then(datos => {
// console.log(datos);
construirTarjeta(datos);
})
.catch((err) => {
console.log("Error al consumir la API\n",
Ejemplo err.message)
} )
.finally(() => {
console.log("Se ha consumido todo el API");
})
Use la siguiente API para simular una batalla entre
2 pokemones.
▪ API: https://pokeapi.co/api/v2/pokemon/[id_poke]/
JAVASCRIPT ▪ Id_poke: número entero entre 1 y 150
▪ Revise el JSON de respuesta y tome los datos que le
SINTAXIS sirvan para el propósito deseado

Ejercicio 1
Trainer
Ing. Carlos H. Rueda C.

También podría gustarte