Obtener API

Durante mucho tiempo , XMLHttpRequest está siendo utilizado por el «amigo» de confianza del desarrollador web. XMLHttpRequest ha habilitado ajax y un nuevo tipo de exposición interactiva. 
Sin embargo, está siendo reemplazado lentamente por la API Fetch . Ambos ofrecen el mismo trabajo, es decir, obtener datos de forma asíncrona desde una red diferente, pero la API Fetch se basa en Promise. Esto proporciona una sintaxis más limpia y concisa.
La API Fetch proporciona el método fetch() definido en un objeto de ventana. Esto se utiliza para realizar requests. Este método devuelve una promesa que se puede usar para recuperar la respuesta de la solicitud. 
Sintaxis básica: 
 

 fetch(url) //call the fetch function passing the url of the API as a parameter
.then(function(){
  //code for handling data from API
});
.catch(function(){
  //code when the server returns any error
});

NOTA: De forma predeterminada, fetch() no enviará ni recibirá cookies del servidor, lo que generará requests no autenticadas.
A continuación se muestra una lista de métodos que se pueden usar cuando obtenemos una respuesta sobre lo que queremos hacer con la información: 
 

1. clone(): para crear un clon de respuesta.
2. redirigir(): para crear una respuesta fuerte con una URL diferente.
3. arrayBuffer(): devolvemos una Promesa que se resuelve con un ArrayBuffer.
4. formData(): también devuelve una Promesa que se resuelve con un FormDataObject.
5. blob(): igual que el anterior solo que se resuelve con un blob.
6. text(): esto se resuelve con una string.
7. json(): resuelve la promesa con JSON .

Solicitud: 
un objeto Solicitud representa la parte de la solicitud de una llamada de búsqueda. Al pasar a buscar una solicitud, puede realizar requests avanzadas y personalizadas: 
 

1. método: GET, POST, PUT
2. url: URL de la solicitud
3. encabezados: objeto de encabezados
4. referente: referente de la solicitud
5. modo: cors, no-cors, mismo origen
6. Credenciales: ¿deben ir las cookies con la solicitud? omitir, mismo origen
7. caché: modo de caché (predeterminado, recargar, sin caché)

CARGANDO JSON 
No podemos bloquear la interfaz de usuario esperando hasta que se complete la solicitud. Es por eso que el método fetch() devuelve una Promesa. Una promesa es en realidad un objeto que representa un resultado futuro. El método then() se usa para esperar la respuesta del lado del servidor y registrarla en la consola.
El siguiente fragmento de código explica la lógica anterior: 
 

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
.then(res=>res.json())
.then(json=>console.log(json));

Async…await 
Esto proporciona una forma más concisa de procesar Promises. Su funcionalidad es que podemos marcar una función como asíncrona, luego esperar a que la promesa termine con la espera y acceder al resultado como un objeto normal.
Ejemplo simple que demuestra cómo se puede usar async…await: 
 

async function demo(subject){
   const URL='https://www.reddit.com/r/javascript/top/.json?limit=5';
   const Res= fetch(URL);
   const response= await Res;
   const json= await response.json();
   console.log(json);
}
demo('javascript');

ERRORES DE MANEJO: 
¿Qué pasa si le pedimos al servidor un recurso inexistente que requiere permisos/autorización? Con fetch(), podemos manejar errores a nivel de aplicación como respuestas 404.
Aunque Fetch API está reemplazando a XMLHttpRequest, un principiante necesita aprender XMLHttpRequest para hacer un uso más efectivo de Fetch API.
Referencia: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API