Cómo utilizar Fetch en JavaScript

Fetch es una función en JavaScript que se utiliza para interactuar con una base de datos y API (interfaz de programación de aplicaciones). Estas interacciones incluyen recuperar, cargar, editar y eliminar datos.

Puedes pensar en Fetch como el juego literal de jugar a buscar con tu perro:

• Lanzas el palo y ves dónde cae (Busca la URL).
• Tu perro corre tras el palo y lo tiene en la boca para eventualmente traerlo de regreso (una promesa de hacer lo que quieras).
• Tu perro te lo trae y te lo entrega, como quieras (tú recibes los datos y puedes usarlos como quieras).

Para comprender Fetch, debe comprender los cuatro tipos de solicitudes que Fetch nos proporciona:

1. Solicitudes GET: se utilizan para recuperar o "obtener" datos.
2. Solicitudes POST: se utilizan para cargar o agregar datos.
3. Solicitudes PATCH / PUT: se utilizan para editar datos que ya están en la base de datos.
4. Solicitudes DELETE: se utilizan para eliminar un dato.

fetch("http://example-Url-of-an-API")

Si ingresa el código anterior en su consola, obtendrá una promesa. De hecho, una solicitud de recuperación exitosa siempre devolverá una promesa. Una excelente manera de pensar en una promesa es como un pagaré. Este pagaré garantiza que se le devolverá algo. Junto con una promesa, viene una respuesta, pero ¿cómo convierte esa respuesta en datos utilizables para las aplicaciones?

¿Quieres leer esta historia más tarde? Guárdelo en el diario.

Hace esto con una .thendeclaración, que convierte los datos en algo legible y digerible con JSON. JSON o J ava S cript O bject N otation es el formato de transmisión de datos a través de aplicaciones web.

Aquí hay un ejemplo de nuestro ejemplo de solicitud Fetch con su primera .thendeclaración:

fetch("http://example-Url-of-an-API")
 .then(response => response.json())

Cuando pides .json()una promesa, a cambio, obtienes otra promesa más. Esta segunda promesa es imperativa porque le permite ver y utilizar los datos que devuelve de la manera que crea conveniente.

En el siguiente ejemplo, los datos de la API se registran en la consola a través de la segunda promesa en la solicitud Fetch.

fetch("http://example-Url-of-an-API")
 .then(response => response.json()
 .then(data => {
        console.log(data)
    })

Para el propósito de este blog y la simplicidad, creé una base de datos de películas simple en mi db.jsonarchivo en VSCode y la ejecuté en localhost: 3000 usando el comando json-server --watchdb.json.

Así es como se ve mi base de datos:

OBTENER Solicitud

GET las solicitudes se utilizan para recuperar o "obtener" datos de una API:

fetch("http://localhost:3000/movies")
 .then(response => response.json())

Solicitud POST

POST las solicitudes se utilizan para cargar o agregar datos a una API:

const configObject = {
 method: ‘POST’,
 headers: 
 {
  “Content-Type”: “application/json”,
  “Accept”: “application/json”
 },
 body: JSON.stringify({
  title,
  release_date,
  image_url,
  rating
 })
}
fetch("http://localhost:3000/movies", configObject)
 .then((response) => {
  return response.json()
 }).then(function (object) {
  return object
})

1. La primera es la solicitud que estoy haciendo a la base de datos o al backend. En este caso, es una POSTsolicitud.
2. Luego están los encabezados, que contienen información sobre los datos que se envían. El tipo de contenido indica en qué formato se enviarán los datos. Aceptar simplemente significa en qué formato aceptará los datos.
3. El último par clave-valor representa la información sobre los atributos necesarios para crear un objeto de película en forma de cadenas.

Solicitud de parche

PATCH / PUT las solicitudes se utilizan para editar datos que ya están en la base de datos.

fetch(`http://localhost:3000/movies/${movieId}`, {
 method: ‘PATCH’,
 headers:
 {
  “Content-Type”: “application/json”,
 },
 body: JSON.stringify({
  image_url,
  rating
 })
})
 .then((response) => {
  return response.json()
 }).then(function (object) {
 return object
})

Dado que estoy actualizando información, voy a utilizar un PATCHmétodo. Para las PATCHsolicitudes, el enlace es dinámico, puede hacer que un enlace sea dinámico utilizando marcas inversas ( `` ). Hice esto porque quiero que la PATCHsolicitud sea aplicable a cualquier película con cualquier Id en nuestra base de datos y para hacer esto necesito interpolar el ${movieId}.

También cambié la sección del cuerpo de la solicitud. Hice esto porque en mi aplicación solo quiero que se puedan cambiar ciertos atributos. En este caso es el image_urly el rating. Omití el titley release_datedado que esos atributos de una película generalmente no cambian.

Borrar petición

DELETE las solicitudes se utilizan para eliminar un dato:

fetch(`http://localhost:3000/movies/${movieId}`, {
 method: “DELETE”,
 }).then(response => response.json())
   .then(response => { return response })

No se preocupe si todo esto parece mucha información al principio. Se necesita tiempo y práctica para entender a Fetch. No olvide que la documentación está disponible y accesible en Internet en todo momento. He encontrado que los documentos web de MDN sobre el uso de Fetch son muy útiles:

Dicho esto, cuando empiece, intente no copiar y pegar la documentación. En su lugar, escriba todo por su cuenta, mientras mira la documentación. Esto le ayudará a comprender mejor lo que está escribiendo y grabará la sintaxis en su memoria.

Tu turno… ¡Ve a buscar!