Scribd
Cargar
27 vistas3 páginas

Fetch en Programación

El documento explica que la función fetch() en JavaScript se utiliza para realizar solicitudes HTTP y obtener datos de forma asíncrona de una URL, como una API. Fetch devuelve una promesa que puede manejarse con then/catch para manipular la respuesta o capturar errores.

Cargado por

Daya Burmi
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 DOCX, PDF, TXT o lee en línea desde Scribd
27 vistas3 páginas

Fetch en Programación

El documento explica que la función fetch() en JavaScript se utiliza para realizar solicitudes HTTP y obtener datos de forma asíncrona de una URL, como una API. Fetch devuelve una promesa que puede manejarse con then/catch para manipular la respuesta o capturar errores.

Cargado por

Daya Burmi
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 DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 3

Fetch en Programación:

En el ámbito de la programación, el término "fetch" suele hacer referencia a la operación de obtener o


recuperar datos de una fuente de información, como una base de datos, una API, un archivo, etc. Por
ejemplo, en el contexto de programación web, el "fetch" se refiere a la acción de hacer una solicitud
HTTP para obtener datos de un servidor.

En JavaScript, por ejemplo, existe la función fetch() que permite realizar peticiones a servidores web y
recuperar datos en formato JSON, texto, HTML u otros formatos.

fetch() entonces es una función preestablecida de javascript que está diseñada para realizar solicitudes
de red, generalmente para obtener recursos de una ubicación remota, como un servidor web.

Aquí tienes un ejemplo simple de cómo se podría usar la función fetch() para obtener datos JSON desde
una API:

La línea 1 de este código crea una solicitud HTTP GET para la URL 'https://api.example.com/data' que es
la ubicación desde donde queremos obtener los datos.

La 2da línea:
El método .then también está predefinido y se utiliza para encadenar acciones que deben realizarse
después de que se resuelve una Promise (La promesa es la respuesta de la solicitud a la URL). En el caso
de fetch(), la función .then() se utiliza para manejar la respuesta de la solicitud de red después de que se
completa.

.then(response => response.json()): En esta línea, encadenamos un método .then() al resultado de la


operación fetch(). Una vez que la respuesta del servidor esté disponible, este método se ejecutará. El
argumento de la función flecha (response) representa la respuesta del servidor. Dentro de esta función,
llamamos al método .json() en la respuesta. Este método convierte la respuesta en un objeto de formato
JSON si es posible. Esto es importante porque muchos servicios web envían datos en formato JSON.

La 3era línea:
.then(data => { console.log(data); }): En esta línea, encadenamos otro método .then(). Aquí, el
argumento data representa el objeto JSON obtenido de la respuesta del servidor. Dentro de esta función,
imprimimos los datos en la consola utilizando console.log(data). Esto podría ser cualquier otro tipo de
manipulación de datos que desees realizar con la información obtenida.
La 4ta línea:
.catch(error => { console.error('Error fetching data:', error); }): Si ocurre algún error durante la
operación de fetch, el flujo de ejecución saltará a esta parte del código. Aquí se captura cualquier error
que ocurra en la operación y lo muestra en la consola utilizando console.error(). Esto puede ser útil para
manejar problemas de red, errores en el servidor u otros problemas que puedan surgir al obtener los
datos.

En el siguiente ejemplo más complejo en javascript:

// api ("Dog Api") fotos de perros

const DOG_API = 'https://dog.ceo/api/breeds/image/random';


const div = document.querySelector("div");

fetch(DOG_API) //promesa (main)


.then(response => {
return response.json();//promesa
})
.then(data => {
usarApi(data);
})
.catch(error => {
console.log('Error', error);
})

function usarApi(param){
div.innerHTML = `<img src="${param.message}" alt"Perro">`
}

/*
def promesa:
const miPromesa = new Promise((resolve, reject) => {
// Hacer algún trabajo asincrónico aquí
// Si la operación se realiza con éxito:
resolve(resultadoExitoso);

// Si ocurre un error:
reject(error);
});
*/
El código en html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba Dog Api</title>
<link rel="stylesheet" href="style.css">

</head>
<body>
<h1>Prueba grupal fetch </h1>

<div class="Hola"></div>
<script src="script.js"></script>

</body>
</html>

Haciendo lo mismo con async:

const DOG_API = 'https://dog.ceo/api/breeds/image/random';


const div = document.querySelector("div");

async function generarImg(){


try {
const response = await fetch(DOG_API);
const data = await response.json();
return data.message;
} catch (error) {
console.log("Error", error);
}
}

async function mostrarImg(){


try {
const imgUrl = await generarImg();
div.innerHTML = `<img src="${imgUrl}" alt="Perro">`;
} catch (error) {
console.log("error", error);
}
}
mostrarImg();

También podría gustarte