Como crear API con JAVASCRIPT 🔥

Al entrar en el mundo de la programación un punto de interés que comienza a resonar es el concepto de Apis.

Las Interfaces de Programación de Aplicaciones (APIs por sus siglas en inglés) son construcciones disponibles en los lenguajes de programación que permiten a los desarrolladores crear funcionalidades complejas de una manera simple. Estas abstraen el código más complejo para proveer una sintaxis más fácil de usar en su lugar.

Existen dos alternativas populares para consumir o comunicarnos una API REST desde javascript; Fetch API y la Biblioteca Axios. En este artículo vamos a profundizar sobre la primera.

¿Como funcionan las APIs?

Las distintas APIs de JavaScript funcionan de forma ligeramente diferente, pero generalmente tienen características similares y una forma parecida en cómo trabajan. Están basadas en objetos.

Las APIs interactúan con tu código usando uno o más Objetos JavaScript, que sirven como contenedores para los datos que usa la API (contenidos en las propiedades del objeto), y la funcionalidad que la API provee (contenida en los métodos del objeto).

Fetch API

La API Fetch proporciona una interfaz para obtener recursos (incluso a través de la red). Parecerá familiar a quien sea que haya usado XMLHttpRequest, pero proporciona un conjunto de características más potentes y flexibles.

En pocas palabras la Fetch API es una alternativa moderna que nos permite interactuar con APIs y obtener los datos a nuestra aplicación, de una forma parecida a lo hacíamos con AJAX pero de una manera mucho más sencilla.

Utilizar el API Fetch es muy sencillo:

Las interfaces genéricas de Headers, Request, and Response proporcionan coherencia, mientras que las promesas permiten un encadenamiento más fácil y async/await sin callbacks.
El único parámetro requerido de fetch() es una url. El método por defecto en este caso es GET.

fetch('http://example.com/movies.json')

El Segundo parámetro es opcional, en sí recibe parámetros extras acerca del tipo de petición que vamos hacer, si queremos enviar datos, bajo qué tipo va a estar encodeado, si vamos a enviar algún tipo de headers (dependiendo de cómo este configurado el servidor)

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers:{
    'Content-Type': 'application/json'
  }
})

¿Cómo hacer un GET utilizando la API Fetch?

Los get también son conocidos como traer datos. El método GET se usa para recuperar datos del servidor.

Este es un método de solo lectura, por lo que no tiene riesgo de mutar o corromper los datos.

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

¿Cómo hacer un POST utilizando la API Fetch?

El método POST envía datos al servidor y crea un nuevo recurso.

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers:{
    'Content-Type': 'application/json'
  }
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

¿Cómo hacer un PUT utilizando la API Fetch?

El método PUT se usa con mayor frecuencia para actualizar un recurso existente.

fetch(url, {
  method: 'PUT',
  body: JSON.stringify({
  	id:1,
    name: "Taylor",
    surname: "Swift"
  }),
  headers:{
    'Content-Type': 'application/json'
  }
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

¿Cómo hacer un DELETE utilizando la API Fetch?

El método DELETE se usa para eliminar un recurso.

fetch('https://jsonplaceholder.typicode.com/user/id',{
	method:'DELETE'
})

¿Cómo capturo los datos de un fetch? ¿Promises? ¿Asyn Await?

Promises
El método Fetch devuelve una promesa, lo que quiere decir que podemos utilizar el método .then cuando la promesa sea resuelta de manera correcta vamos a recibir una función con la respuesta de la petición.

En el siguiente ejemplo simulamos una request que nos devuelve un json: Parceamos la respuesta utilizando el método response.json() que también devuelve una promesa la cual podemos encadenar para finalmente obtener los nuestros datos.

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

En la respuesta tenemos métodos que nos permiten interactuar con diferentes tipos de datos:

1. arrayBuffer()
2. blob()
3. json()
4. text()
5. formData()
6. Async/Await

Existe una alternativa al uso de promesas dentro de la método fetch y al encadenamiento del .then() que puede llevar a que tengamos muchas devoluciones de llamada anidadas, las cuales reducen rápidamente la legibilidad y pueden conducir fácilmente a un mal rendimiento o errores.

El uso de Async / Await no es totalmente compatible con todos los navegadores, por lo que debe ser consciente de esto y verificar sus necesidades al desarrollarlo. Aquí hay un recurso para verificar el soporte y la funcionalidad del navegador , y aquí para usarfetch .

Para llamar a una función usando la palabra clave await, la misma debe estar dentro de una función async como en el ejemplo a continuación.

async function getUser (name)
{
    let response = await
    fetch ('https://api.github.com/users/${name}');
    let data = await response.json()
    return data;
}

Tal como lo expresa Carlos Azustre de aprende JavaScript Una página web sin JavaScript no es una aplicación. Para que sea dinámica, necesitas que pueda consumir un servicio externo como puede ser un API REST.

Finalmente te puedes preguntar ¿tenemos una alternativa para llamar a una API REST desde JavaScrip?

La respuesta sin duda es SI y se trata de una librería llamada Axios, la cual ha venido ganando bastante popularidad, les dejo el enlace oficial y un artículo interesante para los que deseen conocer más sobre el tema.

Fuente

Quiero más

Por supuesto! gracias al apoyo que se ha conseguido por todos ustedes (comentando, suscribiéndote y compartiendo) se agregaron nuevos videos, en esta ocasión iniciamos el curso de testing en angular, curso de node, curso mongo y mucho más.