2

Esto código me imprime y retorna un Observable

this.APIKey = this.http.get(url).subscribe((responseData) => {
  //console.log("API Key", responseData["access_token"]);
  return responseData["access_token"];
});

el cual retorna un json claro

{"access_token":"BQDAK","token_type":"Bearer","expires":3600,"scope":""}

ahora bien necesito asignar el valor de access_token a mi variable local pero ya no se me ocurre nada llevo el día buscando una solución pero todos los foros, blog y la documentación me dicen

return this.httpClient.get(this.REST_API_SERVER).pipe(catchError(this.handleError));

Por cierto si me ayudan con el código para almacenar todo el json como una lista sería genial.

Aplicando los sugerencias de async y await con las funciones de miServicio y ejecucionServicio me devuelve de alguna forma el valor

valor_evaluado_justo_ahora

Esto es lo que me retorna pero sigo sin obtener el valor de la propiedad access_token me retorno un arreglo vació.

A claro este servicio lo uso en la misma clase. En un inicio el API lo tenia quemado (como parte del código) ahora que lo obtengo de forma "automática" no se como hacer lo.

mis_servicios

Les pongo la imagen de como tengo mis servicios espero que con ello se entienda mucho mejor... y si debía hacer lo antes. Les agradezco toda la ayuda hasta el momento.

3 respuestas 3

0

En realidad lo que necesitas puede hacerse de las 2 formas. Pero debes tener en cuenta lo siguiente.

1. Debes tener en cuenta que la forma de trabajar de angular no es secuencial, es decir si colocas en un metodo a ejecutar un proceso y abajo haces otra cosa. en la ejecución no va a esperar a que el primer proceso termine sinó que va a trabajar todo en paralelo. Hay casos muy puntuales en los que si respeta eso.

2. Dependiendo lo que necesitas hacer, así mismo sirve tu proceso. entonces procedo a lo siguiente.

Lo que se plantea en la primer respuesta puedes validar lo siguiente:

console.log(1, this.APIKey);
this.http.get(url).subscribe((responseData) => {
  //console.log("API Key", responseData["access_token"]);
  this.APIKey = responseData["access_token"];

  console.log(2, this.APIKey);
});
console.log(3, this.APIKey);

si realizas la prueba que te muestro en el bloque de código de arriba, podrás entender un poco el comportamiento analizando el orden en que va a mostrar tus console.log la información.

La otra forma podría ser la siguiente:

// En tu service tendrías el siguiente metodo
miServicio() {
  return this.http.get(url).pipe(map(response => response, error => error));
}

// En el componente donde deseas implementar tu servicio tendrías que tener en cuenta 2 cosas
// 1. Agregar el servicio en tu constructor del componente.
constructor(servicio: ClaseServicio) {}

//2. Para ejecutarlo podrías hacerlo de la siguiente manera.
async ejecucionServicio() {
  let respuesta;
  await this.servicio.miServicio().toPromise().then((response) => {
    respuesta = response;
  }).catch(e => console.error(e));
  return respuesta;
}

Tenemos la siguiente función el cual contiene la ejecución de nuestro servicio. y realiza un return de la respuesta obtenida. Debes tener claro que al realizar el async y await la respuesta que obtendremos será de tipo Promise < void >. Para poder obtener el dato real tendrías que hacer lo siguiente:

ejecucionServicio().then(response => {
  this.APIKey = response['access_token']
  console.log(this.APIKey);
});

La verdad, considero que mejor lo haces de la primer manera. solo en casos muy necesarios usalo con el async y await.

Espero te sirva.

5
  • gracias por la explicación aunque sigo sin poder llamar a esa APIKey en el lugar donde la quiero usar ejecucionServicio().then creo que tiene que ver con async y await por cierto .subscribe().toPromise() medio un error no puedes usar subscribe lo puse sin esta función ahí no medio problemas
    – Cristian
    Commented el 21 may. 2020 a las 3:33
  • He ajustado mi respuesta. No agregué el código como debía puedes analizarlo nuevamente e implementarlo en tu código para que puedas hacerlo funcionar
    – jGomez
    Commented el 21 may. 2020 a las 19:43
  • gracias por tu ayuda pero sigo sin poder obtener el valor de la propiedad, al acceder a la propiedad me retorna un valor vació. Pero como puedes ver en la edición que hice si existe el valor solo que no puedo acceder a el; es cierto gracias por la ayuda y toda la explicación proporcionada
    – Cristian
    Commented el 22 may. 2020 a las 5:07
  • hola realmente ya estas obteniendo el resultado según veo en tu pregunta pero para acceder a los datos debes hacer lo que te dije. en el ultimo bloque de cógido. debes llamar tu variable y hacerle un .then(response => {...}) ese response va a ser lo que te retorna tu api. esto pasa ya que el async y await trabajan con promesas. entonces lo que retorna tu funcion es una Promise de tipo void. por eso debes hacer lo que te dije
    – jGomez
    Commented el 26 may. 2020 a las 13:19
  • no hay manera de que el valor exista fuera de token = this.getAPIKey(); porque fuera del toPromise, subscribe, map... no existe el valor todo es API undefined y si pongo mi codigo dentro del then me dice que no puedo llamar lo más abajo porque es un método. A lo que me refiero con llamar lo es la imagen que puse de mis servicios
    – Cristian
    Commented el 28 may. 2020 a las 19:42
0

Puedes usar esto:

this.APIKey = await this.http.get(url).subscribe().toPromise()

para convertirlo en una promesa (poniendo la funcion como async). Almacenas lo que te devuelve en this.APIKey y ya ahi dispondrias del json para hacer lo que quieras.

Para convertilo a Array puedes usar Object.values()

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/values

2
  • ya entendi un poco mas como funciona pero [false, null, null, Array(1), null, false, true, false, null, SafeSubscriber] no se que sucede con la respuesta por cierto como funciona la toPromise() me da un error y no veo cual tengo que importar
    – Cristian
    Commented el 20 may. 2020 a las 18:07
  • convierte el observable en una promesa, y luego puedes usar then y catch dependiendo de si ha ido bien o no la llamada o simplemente asignarla a una variable para usarla mas adelante. el await de delante es para que espere el resultado de la promesa para asignarla a la variable porque sino la llamada no habra terminado y te la asignara en vez de con el valor resultante, como Promise pending... [learnrxjs.io/learn-rxjs/operators/utility/topromise] [medium.com/@jmz12/… Commented el 21 may. 2020 a las 16:43
0

Puedes usar map dentro de tu pipe para obtener el valor antes de entregarlo a la suscripción.

return this.httpClient.get(this.REST_API_SERVER).pipe(
map((respuesta:any)=>{

 //Aqui va tu logica para almacenar A.

this.token = respuesta.access_token

 return respuesta

}),
catchError(this.handleError)

);

Dónde this.token es una variable en tu servico.

Tu importación quedaria asi:

import { map, catchError } from 'rxjs/operators'

Si lo que quieres es asignar tus datos dentro del subscribe solo tienes que hacer esto:

this.http.get(url).subscribe((responseData) => {
  //console.log("API Key", responseData["access_token"]);
  this.APIKey = responseData["access_token"];

  this.miFuncionConLaLogicaNecesaria(this.APIKey)
});

Para que haga lo que quieres debes de ejecutar tu lógica dentro del subscribe. Esto es una idea.


miFuncionConLaLogicaNecesaria(APIkey){
 console.log(APIkey)
}

9
  • modifique un poco la pregunta porque en sí, no quiero guardar sino asignar y con "a" me refería al mismo access_token es la respuesta que obtengo de la URL
    – Cristian
    Commented el 20 may. 2020 a las 18:09
  • No entiendo muy bien con que te refieres a asignar. Edite mi pregunta. Dime que tan cerca estoy de entenderte.
    – Legna
    Commented el 20 may. 2020 a las 18:12
  • con asignar a esto variable = 12 this.APIKey = this.http.get(url).subscribe((responseData) => { console.log("API Key", responseData["access_token"]); }); con console ya tengo el valor que quiero pero obvio no asigna solo presenta
    – Cristian
    Commented el 20 may. 2020 a las 18:24
  • 2
    si lo toma, lo que pasa es que al colocar abajo de tu servicio el console.log(...); se va a ejecutar eso mucho antes de que el servicio obtenga respuesta y la asigne a tu variable. Es decir si le das un valor por defecto la console.log te imprimirá ese valor por defecto y no el obtenido del servicio.
    – jGomez
    Commented el 20 may. 2020 a las 18:50
  • 1
    Edite mi respuesta.
    – Legna
    Commented el 20 may. 2020 a las 19:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.