¿Cómo hacer una llamada a la API desde JavaScript?

Ultima actualización en domingo 13º mar. 2022

JavaScript Rest Api

  • Es importante saber cómo hacer solicitudes http y recuperación de datos de un servidor.
  • JavaScript Proporciona algunos objetos incorporados para interactuar con la API.

Usando XMLHttpRequest()

El objeto XMLHttpRequest se puede utilizar para solicitar datos de un servidor web.

	 const request = new XMLHttpRequest();
    request.open("GET", "https://jsonplaceholder.typicode.com/posts");
    request.send();
    request.onLoad = () => {
       console.log(request);
       if(request.status === 200) {
           console.log(JSON.parse(request.response));
       } else {
           console.log(JSON.parse(request.response));
           console.log(error ${request.status});
       }
    };
	

Usando Fetch API()

Con el método fetch(). Se necesitan dos argumentos:

  • Una URL o un objeto que representa la solicitud.
  • Objeto init opcional que contiene el método, encabezados, cuerpo, etc.
	fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
	

API Call JavaScript

	async function getUsers() {
    let response = await fetch('https://jsonplaceholder.typicode.com/posts');
    let data = await response.josn();
    console.log(data);
}

getUsers().then(res => {
   console.log(res)
})
	

Usando Axios

Axios es un cliente HTTP basado en promesas para node.js y el navegador.

  • Hacer XMLHttpRequests desde el navegador
  • Hacer solicitudes http desde node.js
  • Soporta la API promise
	axios().get('https://jsonplaceholder.typicode.com/posts')
     .then(res => {
        console.log(res)
     }, err =>{
        console.log(err)
     })
	

Usando jQuery

	$(document).ready(function(){
   $.ajax({
     url:"https://jsonplaceholder.typicode.com/posts",
     success: function(response){
        console.log(response)
     },
     error: function(error){
        console.log(error)
     },
   });
})
	

References