# JavaScript Fetch: solicitudes a la API sin código innecesario JavaScript `fetch` es una forma integrada de enviar peticiones a la API manteniendo el código claro. Además de la solución estándar `GET` para solicitudes de datos, la API también puede utilizarse para enviar, modificar y eliminar datos. ## ¿Qué es JavaScript `fetch` y para qué sirve? JavaScript `fetch` es una forma de hacer [peticiones API](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/application-programming-interface-api/) con Promises. Este tipo de interacción evita que el código se vuelva confuso y además ofrece otras numerosas funciones. JavaScript `fetch` envía una **petición a un servidor** y la ejecuta en segundo plano. En este artículo, te explicamos exactamente cómo funciona y qué opciones te ofrece la API `fetch`. ## Las ventajas de un objeto Promise Para comprender el funcionamiento de `fetch` en JavaScript, es necesario echar un vistazo a los **objetos Promise**. Las promesas, introducidas con JavaScript ES6, están diseñadas para facilitar y manejar las **operaciones asíncronas**. Como su nombre sugiere, un objeto promise es una especie de promesa: si se cumple, el código funciona y se obtiene un valor. Si la promesa no se cumple, se recibe un objeto de error como respuesta. Como **reemplazo o complemento de un callback**, las promesas hacen que los procesos asíncronos sean más confiables y mejoran la legibilidad del código. Las promesas pueden tener los estados “pending” (pendiente), “fulfilled” (cumplida) o “rejected” (rechazada). - **pending**: la operación aún no se ha ejecutado o cancelado. - **fulfilled**: la operación se ha ejecutado correctamente. - **rejected**: la operación ha fallado. En el caso de “fulfilled” y “rejected”, puedes reaccionar con métodos como `then()` o `catch`. JavaScript `fetch` hace uso de estas opciones y utiliza las promesas para ejecutar una petición XHR a un servidor. Consejo Benefíciate al máximo de GitHub: con [Deploy Now](https://www.ionos.es/alojamiento/deploy-now "Deploy Now de IONOS") de IONOS, puedes desplegar cambios en el código directamente y realizar un seguimiento de los ajustes en tiempo real. Elige la tarifa que mejor se adapte a tus objetivos. ## Cómo funciona `fetch` en JavaScript La sintaxis básica de `fetch` en JavaScript puede explicarse de forma sencilla. Es de esta forma: ```javascript fetch() ``` El método puede tener en cuenta dos argumentos. Uno es una URL, que se introduce con comillas entre los dos paréntesis. El segundo es un objeto con opciones, que no tiene por qué utilizarse. Se utiliza después de la instrucción propiamente dicha. Para ilustrar mejor la funcionalidad y la estructura, te mostramos el siguiente código de ejemplo: ```javascript fetch(url) .then(function() { }) .catch(function() { }); ``` En el primer paso, almacenamos la URL de la API teórica como parámetro. Esto es seguido por el método promise `then()`, que se extiende por una función. Ésta se ejecutará cuando promise devuelva la **variable `resolve`**. `resolve` se utiliza si una acción debe ser declarada como exitosa. La función de `then()` contiene el código necesario para manejar los datos recibidos de la API. Debajo hemos utilizado el método `catch()`. Este es llamado cuando la **variable `reject`** es devuelta. La variable `reject` se devuelve si no se puede llamar a la API o se producen otros errores. En este caso, la función se ejecuta dentro de `catch()`. De esta manera, con solo tres líneas de código, estás preparado para todas las eventualidades y puedes iniciar solicitudes a la API con `fetch` de JavaScript. ## Peticiones `GET` con `fetch` de JavaScript Puedes utilizar `fetch` de JavaScript para recuperar datos de una API. En el siguiente ejemplo, realizamos una solicitud **`GET`**. Esta es la configuración **por defecto** de `fetch`. Para ello, ahora almacenamos otra URL de ejemplo. Esta responderá con una promesa, a la que aplicamos el método `then()`. A continuación convertimos la respuesta del servidor en un objeto JSON y volvemos a utilizar el método `then()` para mostrar en la consola los datos así obtenidos. Un código adecuado para la operación podría ser el siguiente: ```javascript fetch("https://ejemplourl.com/api") .then((response) => response.json()) .then((json) => console.log(json)); ``` ## Enviar datos con `POST` Aunque la petición `GET` es la estándar, también puedes realizar operaciones **`POST`** con `fetch`. Estas se utilizan para **enviar datos**. De nuevo, primero debemos especificar la URL deseada. Luego usamos la clave `method` para especificar el tipo de petición. En nuestro caso, tiene el valor “POST”. A esto le siguen otras dos claves obligatorias: `body` y `headers`. `body` define los datos que se enviarán al servidor. En nuestro caso, la clave consiste en los **parámetros `title` y `body`**. También utilizamos `JSON.stringify` para convertir los datos en una cadena. `headers` se utiliza para especificar el tipo de datos que se enviarán al servidor. En nuestro caso, deben ser datos JSON y seleccionamos la codificación estándar UTF-8. Ambas claves deben definirse para una petición `POST`. Para nuestro ejemplo anterior, el código correspondiente tendría ahora este aspecto: ```javascript fetch("https://ejemplourl.com/api", { method: "POST", body: JSON.stringify({ title: "Aquí está el título", body: "Aquí está el contenido", }), headers: { "Content-type": "application/json; charset=UTF-8", }, }) .then((response) => response.json()) .then((json) => console.log(json)); ``` ## Actualizar objetos con `PUT` o `PATCH` Un objeto puede actualizarse completamente con una petición **`PUT` o `PATCH`**. Esto también es posible con `fetch`. El enfoque es similar al ejemplo anterior. Debe haber de nuevo una opción `body` con string o `JSON.stringify` y especificamos el tipo de contenido mediante `application/json`. Este es el código de nuestro ejemplo: ```javascript fetch("https://ejemplourl.com/api", { method: "PUT", body: JSON.stringify({ title: "Aquí está el título", body: "Aquí está el contenido", }), headers: { "Content-type": "application/json; charset=UTF-8", }, }) .then((response) => response.json()) .then((json) => console.log(json)); ``` En lugar de `PUT`, también puedes utilizar `PATCH` como alternativa. ## Eliminar objetos con `DELETE` Si quieres utilizar `fetch` para eliminar un objeto, puedes utilizar una solicitud **`DELETE`**. Si es necesario, también puedes implementar el método `then()`. Este sería un ejemplo: ```javascript fetch("https://ejemplourl.com/api", { method: "DELETE", }) .then(() => { elemento.HTML = "Eliminado con éxito"; }) .catch((error) => { console.error('Error en la solicitud:', error); }); ``` Consejo En nuestra Digital Guide encontrarás muchos otros artículos sobre este popular lenguaje de programación. Por ejemplo, tendrás acceso a los [frameworks y librerías más populares para JavaScript](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/frameworks-javascript-y-librerias-populares/). This is a markdown version of: [https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/api-javascript-fetch/](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/api-javascript-fetch/) for AI/LLM consumption.