Cómo hacer un fetch con JavaScript a un endpoint de una API

Algunas veces la frase "consumir una API" puede sonar intimidante, pero la verdad es que es muy sencillo y muy básico. Vamos a crear una función que ejecute una petición a un API de "https://randomuser.me/api/" que nos devolverá un JSON con datos de un usuario random

 function get_randon_user() {
   let options = {
        method: 'GET' 
        //aqui tambien podemos agregar headers si fuera necesario 

      }   

En el código que de la parte superior estamos agregando las opciones de nuestro fetch, esta vez solo agregaremos el método que recibe en endpoint, pero en otras oportunidades te tocara agregar headers, como este

 headers: {accept: 'application/json', 'content-type': 'application/json'},  

ahora haremos el fetch al endpoint para obtener los datos , le pasamos a Fetch los siguiente parámetros URL del endpoint y las options que anteriormente preparamos. entonces con fetch, mandamos la request y el API responde, solicitamos que la respuesta nos devuelva un json, y mostramos el result en un console.log, y si hubiera un error lo capturamos y mostramos el error en la consola

   
     fetch("https://randomuser.me/api/", options) 

    .then(response => response.json()) 

    .then(result => console.log(result)) 

    .catch(error => console.log('error', error)); 

 

Y que nos devuelve el API pues un json con varios objetos con informacion de un usuario randon

  "results": [
        {
            "gender": "male",
            "name": {
                "title": "Mr",
                "first": "Franz-Josef",
                "last": "Schmalz"
            },
            "location": {
                "street": {
                    "number": 2590,
                    "name": "Fliederweg"
                },
                "city": "Zarrentin am Schaalsee",
                "state": "Rheinland-Pfalz",
                "country": "Germany",
                "postcode": 42026,
                "coordinates": {
                    "latitude": "-55.3574",
                    "longitude": "-33.0170"
                },
                "timezone": {
                    "offset": "-6:00",
                    "description": "Central Time (US & Canada), Mexico City"
                }
            },
            "email": "franz-josef.schmalz@example.com",
            "login": {
                "uuid": "4c345fa5-39f2-4eef-88f2-56e2f355563b",
                "username": "yellowcat400",
                "password": "kahlua",
                "salt": "mM7h450Y",
                "md5": "31cc9d916a7832400d0590172fc1edac",
                "sha1": "b764536306bbec81edbf37b9b0c3a862f98b7c9d",
                "sha256": "31f94c959ac6475d4b2d4312a973b1b46f28f7db815ab024714d3a5102722579"
            },
            "dob": {
                "date": "1969-04-03T01:31:17.281Z",
                "age": 54
            },
            "registered": {
                "date": "2020-10-26T16:27:17.820Z",
                "age": 3
            },
            "phone": "0923-3342742",
            "cell": "0172-3419006",
            "id": {
                "name": "SVNR",
                "value": "76 020469 S 405"
            },
            "picture": {
                "large": "https://randomuser.me/api/portraits/men/13.jpg",
                "medium": "https://randomuser.me/api/portraits/med/men/13.jpg",
                "thumbnail": "https://randomuser.me/api/portraits/thumb/men/13.jpg"
            },
            "nat": "DE"
        }
    ],
    "info": {
        "seed": "c00402628479be61",
        "results": 1,
        "page": 1,
        "version": "1.4"
    }
}  

Todos los datos los tenemos así, y basta que le indiques a la respuesta que objeto quieres mostrar

 .then(result => console.log(result.name.first +" "+result.name.last))   

Como pueden ver no es muy dificil y fetch es una forma fácil y efectiva de consumir un API. la función completa quedaría así

 function get_randon_user() { 

   let options = { 

        method: 'GET' 

        //aqui tambien podemos pasar headers si fuera necesario 


      }  
   
  
    fetch("https://randomuser.me/api/", options) 

    .then(response => response.json()) 

    .then(result => console.log(result.name.first + " " + result.name.last )) 

    .catch(error => console.log('error', error)); 

}