Cómo realizar una solicitud con Fetch

Podemos enviar una petición con la función fetch() pasándole como argumento la URL del endpoint al cual queremos enviar la petición. A menos que se especifique lo contrario, de forma predeterminada, fetch enviará lo que se denomina una petición GET a la URL especificada, y responderá con una promesa. Una promesa representa el eventual cumplimiento o falla de un evento asincrónico.

Una vez que recibimos la promesa de una petición realizada con fetch, podemos usar otro método de JavaScript llamado .then() para retornar esta promesa. Este método toma dos funciones de devolución de llamada (callback functions) como argumentos, una para manejar el éxito de la promesa y otra para manejar el error. ¿Qué significa esto? Dado que la solicitud se está enviando a una API e intenta devolver un resultado asincrónico, es posible que algo salga mal en el camino. El servidor podría fallar, usted podría perder la conexión a Internet, la URL del endpoint podría estar mal escrita, etc. Dado que es posible que la promesa haya fallado, el .then() está equipado para manejar fallas e incluso transmitir un mensaje de error que indica qué salió mal.

Entonces, llamamos .then() después de una petición, hacemos algo llamado data parsing, para ello utilizamos otro método de JS, .json() para convertir los datos de la respuesta de la petición a datos de JavaScript Object Notation (JSON), que es más fácil de leer y trabajar. Luego llamamos a .then() una vez más para hacer algo con esos datos, como por ejemplo imprimirlos en la consola.

En el siguiente código podemos ver un ejemplo de una petición realizada con fetch:

fetch('https://url-del-endpoint')
  .then(response => response.json()) 
  .then(data => console.log(data))

Crear nuestra propia fetch request

Para escribir su propia petición fetch, lo único que necesitara es tener un navegador (Google Chrome, Firefox), y vamos a abrir una consola en el navegador. También podría crear un archivo index.html abrir etiquetas script y poner el código de la petición.

Vamos a enviar una petición a la pokeapi, la cual es una API publica que contiene información sobre Pokémon, asi que vamos a enviar una petición para traernos los Pokémon desde esta API, con el endpoint https://pokeapi.co/api/v2/pokemon.

fetch('https://pokeapi.co/api/v2/pokemon')
  .then(response => response.json()) 
  .then(data => console.log(data))

Vemos que al enviar la petición tenemos un objecto JS con la información devuelva por el endpoint, ya podríamos a empezar a utilizar estos datos dentro de nuestra aplicación. Para este ejemplo vamos a recorrer los datos e imprimir el nombre del Pokémon, pero ustedes podrían renderizarla en un documento HTML.

fetch('https://pokeapi.co/api/v2/pokemon')
  .then(response => response.json()) 
  .then(data => { 
       data.results.forEach(pokemon => {
           console.log('%c' + pokemon.name, 'background: #777; color: #fff')
       }); 
  });

Como podemos observar en la siguiente imagen hemos recorrido los pokemones con un forEach, utilizando el arreglo results que venía en el resultado de nuestra petición, y hemos impreso en consola el nombre del Pokémon. Como te puedes dar cuenta, este endpoint solo nos devuelve los primeros 20 pokemones, pero también en el resultado de la petición tenemos un nuevo endpoint llamado next, el cual si hacemos una nueva petición a este endpoint se traerá los siguientes 20 pokemones.

Más sobre funciones asincrónicas

El propósito de una petición fetch es enviar o recuperar datos de forma asíncrona con una API. Asincrónico significa exactamente lo que su propia palabra dice, o en una forma más fácil de explicarlo, nuestra aplicación no esperará a que se complete la petición fetch antes de ejecutar el resto del código JavaScript, a menos que, por supuesto, se lo indiquemos.

Si desea ver un ejemplo de cómo funciona esto, agregue una instrucción console.log después de que finalice el último método .then(). Descubrirá que aunque la petición fetch esta antes del console.log, el log de la consola se imprimirá primero. Esto se debe a que la petición tarda algo de tiempo en completarse y, aunque puede ser rápida, sigue siendo asincrónica y tiene que esperar una respuesta, mientras que el otro código se lee directamente desde el archivo.

Los distintos tipos de peticiones fetch

Cuando se accede a datos con una petición fetch, en realidad estamos utilizando métodos HTTP para comunicarnos con nuestra API. Técnicamente, existen alrededor de 39 métodos HTTP, pero los más importantes que debe conocer son GET, POST, DELETE, PATCH y PUT.

GET

El método de solicitud HTTP GET es probablemente el más fácil de entender. Nuestro ejemplo donde nos traemos los Pokémon desde la pokeapi demuestra una solicitud GET. No debe utilizar peticiones GET para enviar datos, solo deben usarse para recuperar datos.

fetch('https://pokeapi.co/api/v2/pokemon')
  .then(response => response.json()) 
  .then(data => console.log(data))

POST

Un método POST se utiliza para enviar información o datos a un endpoint. Un ejemplo de esto sería crear un nuevo perfil en un sitio web de redes sociales. En una solicitud POST, es necesario utilizar un segundo argumento para pasar los datos que se desean enviar al endpoint. El atributo method define qué método HTTP estamos usando, aquí será POST. El body de la solicitud representa los datos que estamos enviando a la API, en este caso la nueva información de perfil. La propiedad headers nos sirve para especificar los headers que queramos enviar en la petición.

const profile= { 
    username: "Jonathan",
    email: "jonathan@gmail.com",
    password: "123456"
}
fetch('https://mi-red-social/perfil', {
    method: "POST",
    body: JSON.stringify(profile),
    headers: { 
        "Content-type" : "application/json"
    }
})
.then(response => response.json())
.then(data => console.log(data))

DELETE

La estructura de una solicitud DELETE es similar a una solicitud POST, ya que necesitamos especificarle el method y los headers. Supongamos que queremos eliminar una de nuestras imágenes antiguas de Instagram con una petición fetch. Es probable que la imagen tenga un atributo ID que nos permite hacer referencia a ella. Podemos interpolar la URL del endpoint y pasarle el ID de nuestra publicación de Instagram para eliminarla

const imageID = 24;
fetch(`http://instagram/imagenes/${imageID}`, {
    method: "DELETE",
    headers: {
        "Content-Type" : "application/json"
    }
})
.then(response => response.json())
.then(data => console.log(data))

PATCH

El método PATCH es como un método de edición, ya que modifica parcialmente nuestros datos. Podríamos usar una solicitud de PATCH para editar nuestra cuenta de Google y actualizar nuestro número de teléfono. A la solicitud PATCH se le pasa un segundo argumento con un objeto especificando el method, body y headers.

const userID = 1;
fetch(`http://google/cuenta/editar/${userID}`, {
    method: "PATCH",
    body: JSON.stringify({
        phone_number: "555-555-5555"
    }),
    headers: {
        "Content-Type" : "application/json"
    }
})
.then(response => response.json())
.then(data => console.log(data))

PUT

Por último, está el método PUT. Este es similar al método POST, excepto que PUT tiene la capacidad de sobrescribir. Es decir, el método POST crea una nueva instancia de algo, mientras que el método PUT reemplaza el objeto existente con un objeto nuevo y sobrescribe lo que estaba inicialmente.

const profile= { 
    username: "Jonathan",
    email: "jonathan@gmail.com"
}
fetch('https://mi-red-social/perfil', {
    method: "PUT",
    body: JSON.stringify(profile),
    headers: { 
        "Content-type" : "application/json"
    }
})
.then(response => response.json())
.then(data => console.log(data))

Credenciales

Quiero hablar rápidamente sobre las credenciales, ya que son vitales para las solicitudes HTTP, especialmente una vez que comienza a crear aplicaciones con datos seguros. Las credenciales son otra propiedad del objeto que se pasa a la petición fetch, indicando si el endpoint debe enviar una cookie. De forma predeterminada, se establece en same-origin(mismo origen), lo que significa que las credenciales del usuario se pueden enviar si la URL está en el mismo origen que el script que la llama.

Algunas API pueden requerir la inclusión de credenciales en su petición para obtener datos o utilizar otros métodos HTTP. Para incluir credenciales, simplemente agréguelo en el objeto de la siguiente manera:

const data = {};
fetch('http://mi-endpoint.com', {
    credentials: 'include',
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    },
    body: JSON.stringify(data)
})