Consumir una API

SpiuK #1 Dic '21

Hola! Abro este post tan solo para preguntaros unos pasos a seguir para poder consumir una API.

Actualmente, uso Microsoft Graph y la consumo a traves de Postman. Hasta aquí no hay problema ya que realmente no hace falta ni código ni nada por el estilo.

A modo personal (no lo necesito por trabajo ni nada) me gustaría hacer pues una pequeña tontearía en HTML o algo así que sea por ejemplo pulsar el botón X de la página y te devuelva usuarios o algo así.

He estado mirando y veo que hablan de JavaScript, python y demás, pero casi todo lo que encuentro es para crear una API.

Yo lo único que quiero es conectarme a una API y mandarle get/post/lo que sea desde un cuadradito, por probar.

¿Sabéis si es factible hacer eso para alguien que no sabe acerca de desarrollo o podríais recomendarme algún video/articulo en concreto para hacerlo?

Gracias!

isvidal #2 Dic '21

Aqui te dejo un html de ejemplo, con un boton que tira un request:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Como consumir una API</title>
    <script>
      // PON LA URL QUE QUIERAS Y EL METODO
      const onButtonClick = () => fetch('TU_URL_AQUI', {
          method : "GET",
      }).then((response) => response.json()).then((data) => {
          // AQUI YA TIENES TU DATA
          console.log(data)
      })
    </script>
</head>
<body>
    <button onclick="onButtonClick()">Pulsame</button>
</body>
</html>

2 1 respuesta

SpiuK #3 Dic '21

#2 Thanks! Por lo que veo al poner la URL con un metodo si que trata de devolvermelo, pero claro, me da 401 por que no me autentico. Voy a ver si encuentro algo con eso..

1 respuesta

isvidal #4 Dic '21

#3 el fetch acepta mas parametros

fetch('TU_URL_AQUI', {
          method : "GET",
          headers : {
             Authorization : "MI JWT TOKEN"
          }
      })

1 respuesta

SpiuK #5 Dic '21

#4 Já, conseguido:

La cosa esta en que he adquirido el token desde Postman y lo he puesto a pelo en el codigo que me has enviado. Entiendo que el hacer el login y obtener el token desde ahi es mas complicado, no?

1 respuesta

isvidal #6 Dic '21

#5 Depende, como haces el login en postman?

1 respuesta

SpiuK #7 Dic '21

#6

2 respuestas

B

[Borrado] #8 Dic '21

.

2 respuestas

SpiuK #9 Dic '21

#8 Si, así es. No me es problema el ir logandome ya que además voy haciendo cambios en los permisos de la API en Azure. Ya digo, no es para nada profesional si no por el simple hecho de cacharrear.

Según veo, el token que me da:

expires_in
3907
ext_expires_in
3907

isvidal #10 Dic '21

#7 Deberias hacer un fetch antes de cada nuevo fetch que hagas en el html, ese primer fetch es a la url que tienes alli configurada con los mismos parametros, y lo que te devuelve que es el token, luego usarlo en el siguiente fetch.

Simplificando mucho en caso de que quieras usarlo.

2 respuestas

SpiuK #11 Dic '21

#10 Entiendo que para el ejemplo que estoy haciendo, seria copiar varias veces el contenido que me has puesto y modificar la petición a la api.

También podría hacer que guardara ese valor en una variable y me lo rellenase.

Voy a trastear, os iré diciendo xD.

Muchísimas gracias.

JuAn4k4 #12 Dic '21

Para el auth puedes usar MSAL.js igual que usaras la librería de Graph de js https://docs.microsoft.com/es-es/graph/tutorials/javascript?tutorial-step=1

2 respuestas

SpiuK #13 Dic '21

#12 Me voy a intentar hacer eso entero. Muchas gracias Juanaka!

1

SpiuK #14 Dic '21

#12 Doble posteo para darte las gracias. Me ha funcionado. He cogido cosas que me pueden servir y que en base a pelearme e ir modificándolas puedo conseguir lo que quiero aprender.

Muchas gracias al resto tambien: #12 #10 #8

2

Consumir una API

Usuarios habituales

Tags