JavaScript Fetch API For Beginners – Explained With Code Examples

 Fetch API es una función de JavaScript que puede utilizar para enviar una solicitud a cualquier URL de API web y obtener una respuesta.

En este artículo, le mostraré cómo realizar solicitudes HTTP a API externas utilizando la API Fetch de JavaScript. Aprenderá a crear solicitudes GET, POST, PUT/PATCH y DELETE utilizando la API Fetch.

Para aprovechar al máximo este artículo, debe tener un buen conocimiento de las promesas de JavaScript. Puedes leer mi artículo JavaScript Promises si necesitas un repaso.

Cómo funciona la API de recuperación
Cómo enviar una solicitud GET
Cómo enviar una solicitud POST
Cómo enviar una solicitud PUT
Cómo enviar una solicitud de PATCH
Cómo enviar una solicitud de ELIMINACIÓN
Cómo utilizar Async/Await con la API Fetch
Ejecutar ejemplos de código
Resumen
¡Empecemos!

Cómo funciona la API de recuperación
Para enviar una solicitud similar a la de un formulario HTML, solo necesitas pasar la URL donde deseas enviar los datos como argumento de la fetch()función:

fetch('<Your URL>', {})
Obtener sintaxis de API
La fetch()función acepta dos parámetros:

La URL a la que enviar la solicitud (este es un parámetro obligatorio).
Las opciones a configurar en la solicitud. Puede configurar el método de solicitud aquí (este es un parámetro opcional).
Debajo del capó, la fetch()función devuelve a Promise, por lo que necesitas agregar los métodos .then()y ..catch()

Cuando la solicitud devuelva una respuesta, then()se llamará al método. Si la solicitud devuelve un error, catch()se ejecutará el método:

fetch('<Your URL>', {})
  .then(response => {
    // Handle Fetch response here.
  })
  .catch(error => {
    // If there's an error, handle it here
  })
Manejo de la respuesta de recuperación con then() y catch()
Dentro de los métodos .then()y .catch(), pasa una función de devolución de llamada para ejecutar cuando se llaman los métodos respectivos.

El .catch()método se puede omitir en Fetch API. Se usa solo cuando Fetch no puede realizar una solicitud a la API, como por ejemplo si no hay conexión de red o no se encuentra la URL.

Cómo enviar una solicitud GET utilizando la API Fetch
La solicitud GET es una solicitud HTTP que se utiliza para solicitar datos específicos de una API, como cuando necesita

En el siguiente ejemplo, accederemos a una URL ficticia ubicada en https://jsonplaceholder.typicode.com para solicitar un usuario registrado en el sitio:

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(response => console.log(response))
  .catch(error => console.log(error));
Enviar una solicitud GET mediante Fetch API
El código anterior dará la siguiente respuesta:

buscar-transmisión-legible
Obtener respuesta a la solicitud
Aquí puede ver que la propiedad del cuerpo contiene un archivo ReadableStream. Para usar ReadableStreamen nuestra aplicación JavaScript, necesitamos convertirlo para llamar al json()método:

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(response => response.json())
  .then(data => console.log(data))
Convierta la respuesta de recuperación a JSON con el método json()
El json()método convierte el ReadableStreamen un objeto JavaScript. La datavariable anterior se imprimirá de la siguiente manera:

{
  "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"
  }
}
El objeto JavaScript devuelto por Fetch
Ahora que tiene el dataobjeto, puede usar este valor de la forma que desee. Por ejemplo, si desea mostrar el nombre de usuario y el correo electrónico en HTML, así es como lo hace:

<body>
  <h1 id='user-name'>Waiting for data</h1>
  <h2 id='user-email'>Waiting for data</h1>
  <script>
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then(response => response.json())
      .then(data => {
        document.querySelector('#user-name').textContent = data.name
        document.querySelector('#user-email').textContent = data.email
      })
  </script>
</body>
Ejemplo de visualización de respuesta de recuperación en HTML
En el código anterior, la API Fetch se ejecutará tan pronto como el navegador cargue el documento HTML.

Después de procesar el responseen un dataobjeto, JavaScript cambiará el texto de los elementos <h1>y <h2>de arriba para reflejar el namey emaildel usuario.

Si ejecuta el código anterior, obtendrá el siguiente resultado:

buscar-obtener-respuesta
El resultado de la solicitud de recuperación que se muestra en el navegador
Y así es como envía una solicitud GET usando Fetch y muestra los datos devueltos en HTML.

Tenga en cuenta que, según la solicitud que solicite, una API puede devolver un tipo diferente de datos.

En este ejemplo, la API typicode devuelve un objeto, pero también puede obtener una matriz cuando solicita más de una unidad de datos.

Si accede a la URL en https://jsonplaceholder.typicode.com/users , verá que la API responde con una serie de objetos.

Para manejar una matriz de objetos, puede iterar sobre la matriz y mostrar los datos en HTML de la siguiente manera:

// example
Necesita conocer el tipo de datos devuelto por la API para manejarlo correctamente.

Cómo enviar una solicitud POST utilizando la API Fetch
Si desea enviar una solicitud POST en lugar de una solicitud GET, debe definir el segundo argumento al llamar a la función, que es el objeto de opción.

Dentro del objeto de opción, defina una methodpropiedad de la siguiente manera:

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'POST', // Set method here
})
.then(response => response.json())
.then(data => console.log(data))
Configuración del método de recuperación en POST
Cuando envía un método POST, debe configurar el encabezado de la solicitud y las propiedades del cuerpo para garantizar un proceso fluido.

Para el encabezado, debe agregar la Content-Typepropiedad y configurarla en application/json.

Los datos que desea enviar deben colocarse dentro de la bodypropiedad en formato JSON. Vea el ejemplo a continuación:

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Nathan Sebhastian',
    email: 'ns@mail.com'
  }),
}).then(response => response.json())
  .then(data => console.log(data))
Agregar parámetros de encabezado y cuerpo de solicitud
En el ejemplo anterior, enviamos una solicitud POST para crear un nuevo usuario. En la bodypropiedad, un objeto JavaScript normal se convirtió en una cadena JSON llamando al JSON.stringify()método.

JSON es uno de los formatos que utilizan las computadoras para comunicarse entre sí en Internet.

La respuesta de la API de Typicode.com sería similar a la siguiente:

{
  "name": "Nathan Sebhastian",
  "email": "ns@mail.com",
  "id": 11
}
Respuesta a la solicitud POST
Esto significa que creamos exitosamente un nuevo usuario. Dado que typicode.com es una API falsa, el usuario realmente no será agregado, pero simulará como si lo fuera.

Cómo enviar una solicitud PUT
Una solicitud PUT se utiliza para crear un nuevo recurso o actualizar uno existente.

Por ejemplo, si desea actualizar un usuario namey emaildatos existentes. Puede utilizar una solicitud PUT para hacerlo:

fetch('https://jsonplaceholder.typicode.com/users/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Nathan Sebhastian',
    email: 'nathan@mail.com'
  }),
}).then(response => response.json())
  .then(data => console.log(data))
Ejemplo de envío de una solicitud PUT con Fetch
La solicitud anterior recibirá la siguiente respuesta:

{
    "name": "Nathan Sebhastian",
    "email": "nathan@mail.com",
    "id": 1
}
Debido a que ya existen datos de usuario con un idvalor de 1, la solicitud PUT anterior actualiza esos datos.

A continuación, veamos la solicitud PATCH.

Cómo enviar una solicitud de PATCH
La solicitud PATCH se envía cuando necesita actualizar una solicitud existente.

Por ejemplo, si desea cambiar los datos namey usernamede un usuario existente.

A continuación se muestra un ejemplo de cómo enviar una solicitud PATCH a typicode.com:

fetch('https://jsonplaceholder.typicode.com/users/1', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ 
    name: 'Nathan Sebhastian',
    username: 'nsebhastian'
  }),
}).then(response => response.json())
  .then(data => console.log(data))
Ejemplo de envío de una solicitud PATCH con Fetch
La solicitud anterior dará la siguiente respuesta:

{
    "id": 1,
    "name": "Nathan Sebhastian",
    "username": "nsebhastian",
    "email": "Sincere@april.biz",
    // ... the rest of user data
}
Arriba, puede ver que los valores de propiedad namey usernamese actualizan utilizando el cuerpo de la solicitud PATCH.

Cómo enviar una solicitud de ELIMINACIÓN
La solicitud DELETE se utiliza cuando desea solicitar que un recurso se elimine permanentemente del servidor.

Para ejecutar una solicitud DELETE con Fetch, solo necesita especificar la URL del recurso que desea eliminar y la method: 'DELETE'propiedad de la siguiente manera:

fetch('https://jsonplaceholder.typicode.com/users/1', {
  method: 'DELETE',
}).then(response => response.json())
  .then(data => console.log(data))
Ejemplo de envío de una solicitud DELETE con Fetch
La solicitud anterior eliminará los datos de un usuario que tenga un valor de identificación de 1.

La API podría responder con algún mensaje para confirmar que el recurso se ha eliminado. Pero como typicode.com es una API ficticia, devolverá un objeto JavaScript vacío {}.

Cómo utilizar Async/Await con la API Fetch
Dado que Fetch devuelve un Promiseobjeto, esto significa que también puedes usar la sintaxis async/ awaitpara reemplazar los métodos .then()y .catch().

A continuación se muestra un ejemplo de envío de una solicitud GET usando Fetch en sintaxis async/await:

try {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const json = await response.json();
  console.log(json);
} catch (error) {
  console.log(error);
}
Uso de Async/Await para manejar la respuesta de recuperación
Manejar una respuesta Fetch usando async/ awaitparece más limpio porque no es necesario usar las devoluciones de llamada .then()y .catch().

Si necesita un repaso sobre async/await, puede leer mi artículo JavaScript Async/Await .

https://www.freecodecamp.org/news/javascript-fetch-api-for-beginners/


API de recuperación de JavaScript para principiantes: explicada con ejemplos de código

Ejemplo de código de ejecución
También creé un sitio web de ejemplo que le muestra cómo ejecutar estos 5 protocolos de solicitud HTTP en https://nathansebhastian.github.io/js-fetch-api/

Compruébalo y estudia el dataobjeto devuelto. Para saber qué solicitudes de API puede enviar a una API específica, debe consultar la documentación de ese proyecto de API.

Resumen
Fetch API le permite acceder a las API y realizar una solicitud de red utilizando métodos de solicitud estándar como GET, POST, PUT, PATCH y DELETE.

La API Fetch devuelve una promesa, por lo que debe encadenar la llamada a la función con los métodos .then()y .catch(), o usar la sintaxis async/await.

¡Y así es como funciona la API Fetch! Si te ha gustado este artículo, quizás quieras consultar mi libro Beginning Modern JavaScript para mejorar tus habilidades en JavaScript:

Comentarios

Publicar un comentario

Entradas populares de este blog

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

  Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6   Para crear una copia de seguridad de un archivo MS Access (.mdb) a un pendrive cuando se hace clic en un botón en un formulario VB6, puedes usar el siguiente código: vb Private Sub cmdBackup_Click ()     On Error GoTo ErrorHandler         Dim ArchivoOrigen As String     Dim ArchivoDestino As String     Dim UnidadPendrive As String     Dim FSO As Object     Dim Drv As Object     Dim Existe As Boolean         ' Ruta del archivo de origen (base de datos Access)     ArchivoOrigen = "C:\Ruta\A\Tu\BaseDeDatos.mdb" ' Cambiar por tu ruta real         ' Verificar si el archivo de origen existe     If Dir(ArchivoOrigen) = "" Then         Ms...
Leer más

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

COMO INSERTAR FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE ChatGPT Para insertar una fecha con PHP y MySQL en un formulario usando el método POST con jQuery y la etiqueta date, puedes seguir estos pasos. Asumiré que estás utilizando un formulario HTML con un campo de fecha: Crear el formulario HTML: html Copy code <!DOCTYPE html> <html lang="es"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Formulario de Fecha</title>     <!-- Agregar jQuery -->     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body>     <form id="miFormulario">         <label for="fecha">Fecha:</label>         <input type="date" id="fecha" name="fecha" required>         <but...
Leer más

DETECTAR DIRECCION IP CON PHP Y JS

  Para detectar la IP real del visitante de una página web, puedes hacerlo tanto con PHP como con JavaScript, aunque PHP es más confiable ya que JavaScript ejecuta en el lado del cliente y puede ser manipulado. 1. Detectar la IP con PHP PHP es la mejor opción para obtener la IP, ya que corre en el servidor y no depende del navegador. Sin embargo, la IP obtenida puede estar detrás de un proxy, así que se pueden usar varios encabezados HTTP. php function obtenerIP() {     if (!empty($_SERVER['HTTP_CLIENT_IP'])) {         // IP desde el compartido de Internet         return $_SERVER['HTTP_CLIENT_IP'];     } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {         // IP detrás de un proxy         return $_SERVER['HTTP_X_FORWARDED_FOR'];     } else {         // IP real del usuario         return $_SERVER['REMOTE_ADDR'];     } ...
Leer más