Lección 12: Fetching data

AJAX, acrónimo de Asynchronous JavaScript And XML o JavaScript asíncrono y XML, es una técnica que nos permite comunicarnos con otros servicios para obtener/añadir/modificar/borrar información de manera asíncrona (a continuación de ser cargada la web). Hoy en día seguimos utilizando la misma estrategia salvo que disponemos de APIs más modernas como Fetch. También lo puedes considerar: realizar petición HTTP asíncrona.

Obtener datos de un servidor nos abre la puerta a una cantidad ilimitada de información por parte de otros servicios (estadísticas, bases de datos, cálculos…) que bien tratada enriquecerán la navegación con estructuras nuevas de HTML o elementos que mejoran la experiencia.

Por ejemplo si estoy haciendo un buscador de viajes, sería agradable indicar que tiempo hará en el destino cuando se indique la fecha de salida. En este caso preguntaría a un servidor externo (API) dicha información para después crear un apartado dentro de la web con la temperatura. ¿Esas predicciones están en mi código? No, para nada. Pregunto, me responden y muestro.

API significa: interfaz de programación de aplicaciones o application programming interface. Puede ser interna del lenguaje, como el propio fetch o externa, como un servicio que nos permite hacerle peticiones HTTP.

Ejemplo AJAX

Cuando gestionamos información, independientemente del lenguaje o base de datos, disponemos 4 acciones básicas elementales.

Crear (Create).
Leer (Read).
Actualizar (Update).
Borrar (Delete).

Para simplificar se le denomina CRUD.

Cuando realizamos peticiones HTTP, o hacemos peticiones, disponemos del mismo sistema aunque usamos verbos para comunicarnos con el servidor.

GET: Leer.
POST: Crear.
PUT: Actualizar.
DELETE: Borrar.

O también llamados métodos (Methods).

Si quisiera conectarme con un API externo usaremos la función fetch.

fetch('https://dominio.com/')
  .then(function(response) {
    // Transforma la respuesta. En este caso lo convierte a JSON
    return response.json();
  })
  .then(function(json) {
    // Imprimo por consola
    console.log(json)
  });

Con versión ES6 de JavaScript se modernizó las herramientas para realizar peticiones en AJAX, llamada fetch. El 27 de Marzo del 2017 Safari lo implementó aunque Chrome y Firefox ya lo tenían habilitado desde 2015. Fue en ese momento cuando se convirtió en una posibilidad para usarlo, aunque encontrarás por la red muchos ejemplos antiguos usando XMLHttpRequest.

Su ejecución es asíncrona, por lo que siempre nos devolverá una Promise (una promesa). Para esperar a que termine tenemos 2 posibilidades, o usar la función then() o ejecutarlo en una función asíncrona y esperar con await.

async function hacerPeticion() {
  // Realiza la petición
  const miFetch = await fetch('https://dominio.com/');
  // Transforma la respuesta. En este caso lo convierte a JSON
  const json = await miFetch.json();
  // Imprimo por consola
  console.log(json);
}

hacerPeticion();

Mi recomendación es que realices las llamadas con este último ejemplo ya que será más fácil de estructurar y además es más rápida en devolver resultados (hablamos de milésimas de segundo, tampoco hay que perderla cabeza con el tema). Igualmente ten cuidado cuando realices un return ya que devolverá una promesa.

GET

Método GET

Usando `.then()`

fetch('https://jsonplaceholder.typicode.com/users')
  .then(function(response) {
    // Transforma la respuesta. En este caso lo convierte a JSON
    return response.json();
  })
  .then(function(json) {
    // Usamos la información recibida como necesitemos
    console.log(json)
  });

Otra versión con función arrow.

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.json())
  .then((json) => console.log(json));

Usando `await`

async function obtenerUsuarios() {
  // Realiza la petición
  const miFetch = await fetch('https://jsonplaceholder.typicode.com/users');
  // Transforma la respuesta. En este caso lo convierte a JSON
  const json = await miFetch.json();
  // Imprimo por consola
  console.log(json);
}

obtenerUsuarios();

Imprime por consola.

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    ...

Parámetros en la URL

En ciertas ocasiones necesitamos incluir parámetros en la URL. Es un caso particular del verbo GET, ya que es la única manera de transmitir configuraciones al servidor. Las rutas tendrán la siguiente forma:

https://dominio.com?query=barcos&page=4

El símbolo del interrogante (?) separa el nombre del dominio de los parámetros, cuyo formato es siempre “nombre parámetro” + “=” + “valor”. En el caso anterior podemos observar el parámetro query con el valor barco, y el parámetro page con el valor 4. Entre los parámetros se utiliza un & como separador, y no existen los espacios o carácteres especiales (como los acentos o eñes).

¿Cuando debemos utilizarlo? Cuando la documentación de la API nos pida transmitirle parámetros en este formato, usando el verbo GET. La forma más moderna, y práctica, es utilizar el objeto URLSearchParams.

const URL_API = "https://dominio.com";
const misParametros = new URLSearchParams();
misParametros.set("query", "barcos");
misParametros.set("page", 4);
const URLConParametros = `${URL_API}?${misParametros.toString()}`;

console.log(URLConParametros);
// https://dominio.com?query=barcos&page=4

¡No hagas la URL a mano! Hay carácteres, como los espacios o los acentos, que no podrás concadenar correctamente sin previamente parsearlo a URI. Usa URLSearchParams aunque solo sea un solo parámetro.

POST

Método POST

Usando `.then()`

fetch('https://jsonplaceholder.typicode.com/users', {
  headers: {
    'Content-type': 'application/json'
  },
  method: 'POST',
  body: JSON.stringify({ id: 11, name: 'Rodrigo Díaz de Vivar', username: 'El Cid' })
  })
  .then(function(response) {
    // Transforma la respuesta. En este caso lo convierte a JSON
    return response.json();
  })
  .then(function(json) {
    // Usamos la información recibida como necesitemos
    console.log(json)
  });

Otra versión con función arrow.

fetch('https://jsonplaceholder.typicode.com/users', {
  headers: {
    'Content-type': 'application/json'
  },
  method: 'POST',
  body: JSON.stringify({ id: 11, name: 'Rodrigo Díaz de Vivar', username: 'El Cid' })
  })
  .then((response) => response.json())
  .then((json) => console.log(json));

Usando `await`

async function anyadirUsuario() {
  // Realiza la petición
  const miFetch = await fetch('https://jsonplaceholder.typicode.com/users', {
  headers: {
    'Content-type': 'application/json'
  },
  method: 'POST',
  body: JSON.stringify({ id: 11, name: 'Rodrigo Díaz de Vivar', username: 'El Cid' })
  });
  // Transforma la respuesta. En este caso lo convierte a JSON
  const json = await miFetch.json();
  // Imprimo por consola
  console.log(json);
}

anyadirUsuario();

Devolviendo.

{
  "id" : 11,
  "name" : Rodrigo Díaz de Vivar,
  "username" : El Cid
}

PUT

Método PUT

Usando `.then()`

fetch('https://jsonplaceholder.typicode.com/users/1', {
  headers: {
    'Content-type': 'application/json'
  },
  method: 'PUT',
  body: JSON.stringify({ username: 'El Campeador' })
  })
  .then(function(response) {
    // Transforma la respuesta. En este caso lo convierte a JSON
    return response.json();
  })
  .then(function(json) {
    // Usamos la información recibida como necesitemos
    console.log(json)
  });

Otra versión con función arrow.

fetch('https://jsonplaceholder.typicode.com/users/1', {
  headers: {
    'Content-type': 'application/json'
  },
  method: 'PUT',
  body: JSON.stringify({ username: 'El Campeador' })
  })
  .then((response) => response.json())
  .then((json) => console.log(json));

Usando `await`

async function actualizarUsuario() {
  // Realiza la petición
  const miFetch = await fetch('https://jsonplaceholder.typicode.com/users/1', {
  headers: {
    'Content-type': 'application/json'
  },
  method: 'PUT',
  body: JSON.stringify({ username: 'El Campeador' })
  });
  // Transforma la respuesta. En este caso lo convierte a JSON
  const json = await miFetch.json();
  // Imprimo por consola
  console.log(json);
}

actualizarUsuario();

Dándonos la información que hemos modificado.

{
  username: "El Campeador",
  id: 1
}

DELETE

Método DELETE

Usando `.then()`

fetch('https://jsonplaceholder.typicode.com/users/2', {
  method: 'DELETE'
  })
  .then(function(response) {
    // Transforma la respuesta. En este caso lo convierte a JSON
    return response.json();
  })
  .then(function(json) {
    // Usamos la información recibida como necesitemos
    console.log(json);
  });

Otra versión con función arrow.

fetch('https://jsonplaceholder.typicode.com/users/2', {
  method: 'DELETE'
  })
  .then((response) => response.json())
  .then((json) => console.log(json));

Usando `await`

async function borrarUsuario() {
  // Realiza la petición
  const miFetch = await fetch('https://jsonplaceholder.typicode.com/users/1', {
  headers: {
    'Content-type': 'application/json'
  },
  method: 'DELETE'
  });
  // Transforma la respuesta. En este caso lo convierte a JSON
  const json = await miFetch.json();
  // Imprimo por consola
  console.log(json);
}

borrarUsuario();

Actividad 1

Usa el siguiente API https://yesno.wtf/ para cuando se pulse un botón nos responda con un Si o No.

Nivel pesadilla 👹

Muestra el gif.

Actividad 2

Usa el siguiente Endpoint con el listado de Pokemons con el objetivo de mostrar todos los Pokemons en una tabla.

Actividad 3

A partir del siguiente URL intenta generar un buscador de Wikipedia.

https://es.wikipedia.org/w/api.php?action=query&list=search&srsearch=Nelson%20Mandela&utf8=&format=json&origin=*

El parámetro más importante, y que debes manipular, es srsearch, el resto son obligatorios

Actividad 4

A partir del API de jsonplaceholder, crea un blog usando los endpoints:

/posts
/posts/1
/posts/1/comments

Tus objetivos son:

Lista 5 artículos con: título y autor.
Crea un botón para visualizar los 5 siguientes.
Cuando se pulse en un artículo, muestra su texto y los comentarios.
Añade un buscador que encuentre por su título o contenido.

No olvides crear un loading elegante que distraiga a los lectores.

Nivel pesadilla 👹

Crea un scroll infinito en lugar de usar un botón.

¡Pista Usa IntersectionObserver!

Actividad 5

A partir del API de Openweathermap, muestrame en HTML si hoy va a llover.

https://openweathermap.org/api

Actividad 6

Usa una de las siguientes APIs para crear cualquier cosa. Eres libre.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario

Lección 12: Fetching data

GET

Usando .then()

Usando await

Parámetros en la URL

POST

Usando .then()

Usando await

PUT

Usando .then()

Usando await

DELETE

Usando .then()

Usando await

Nivel pesadilla 👹

Nivel pesadilla 👹

¿Me invitas a un café? ☕

Comentarios

Usando `.then()`

Usando `await`

Usando `.then()`

Usando `await`

Usando `.then()`

Usando `await`

Usando `.then()`

Usando `await`