¿Cómo usar JavaScript Fetch API para obtener datos?

La API Fetch proporciona una interfaz de JavaScript que permite a los usuarios manipular y acceder a partes de la canalización HTTP, como respuestas y requests. 

Fetch API tiene tantas opciones ricas y emocionantes como método, encabezados, cuerpo, referente, modo, credenciales, caché, redirección, integridad y algunas más. Sin embargo, los más destacados que usamos son el método, los encabezados y el cuerpo.

Los métodos se utilizan para crear, leer, actualizar y eliminar datos y, por lo tanto, tenemos métodos como GET, POST, PUT y DELETE.

Como ejemplo, usaríamos la API: https://reqres.in/arpi/users , que nos daría datos aleatorios sobre una persona, nuestro objetivo aquí es ver qué se presenta en estos datos. 

Sintaxis: 

fetch(URL, options)

Parámetros: este método acepta dos parámetros, como se muestra arriba y se describe a continuación:

1. URL: este es el punto final del recurso desde donde desea obtener datos.
2. Opciones: Este es un parámetro opcional, es un objeto de opciones que puede tener los siguientes valores:
   • Método: Esto denota el tipo de método, puede ser de cualquier tipo de solicitud HTTP, como GET, POST, PUT, DELETE, etc.
   • Encabezados: en caso de que estemos pasando datos al servidor, también debemos decirle a fetch que vamos a pasar datos en forma de json/texto, etc.  
   • Cuerpo: en esta parte, en realidad pasamos los datos como JSON.

Ejemplo 1: Demostración de solicitud GET.

fetch("https://reqres.in/api/users")
.then(res => res.json())
.then(data => console.log(data))

Salida: esto es lo que nos devuelve la API, algunos datos aleatorios sobre las personas.

Ejemplo 2: Demostración de solicitud POST. Ahora publicaremos algunos datos aleatorios por nosotros mismos, con la ayuda del método POST. 

fetch("https://reqres.in/api/users", {
  // Defining method type as POST
  method: 'POST', 
  // Fetch knows, what type of data are we dealing with
  headers: {
    'Content-Type': 'application/json' 
  },
  // Data needs to be parsed into JSON
  body: JSON.stringify({ 
    name: 'Geeks For Geeks',
    website: 'https://www.geeksforgeeks.org/',
  })
}).then(res => {
  return res.json()
}).then(data => console.log(data));

Salida: aquí, vemos que hemos realizado con éxito una solicitud POST utilizando la API de búsqueda.