0

Estoy obteniendo un TOKEN de una API. Para ello uso un get().subscribe... en el subscribe el TOKEN ya se obtiene, pero en el return ya no existe el valor.

Clase

@Injectable({
  providedIn: "root",
})
export class Service {
...
}
getAPIKey() {
    let token: string;
    const urlServer = `https://url.com`;
    this.http.get(urlServer).subscribe((data) => {
      token = data[`access_token`];
    });    
    return token;
}

y al llamar esta función, en la función getQuery me retorna undefined

getQuery(query: string) {
    let token: string;
    setTimeout(() => {
      token = this.getAPIKey();
    }, 5000);
    //3600000
    const url = `https://api.com/${query}`;
    console.log(`consulta `, url);
    const autorizacionAutomatico = `"Bearer ${token}"`;
    console.log(`Autorizacion `, autorizacionAutomatico);
    const headers = new HttpHeaders({
      Authorization: autorizacionAutomatico,
    });
    return this.http.get(url, { headers });
}

El porque hay 2 funciones es simple la primera obtiene el TOKEN y la segunda funciona como autorización para las consultas.

La URL https://api.com/${query} es parcial, hay otras funciones que completa esta con: lugares, comida, población.

De forma que:

  1. Obtiene el TOKEN
  2. Genera el headers con el TOKEN
  3. Completa la URL, con la función comida

Pero técnicamente no llego ni a completar el paso 1. Porque fuera del subscribe parece que se pierde el valor. Me comentaron algo de que se ejecutan en cierto orden, lo que hace que obtenga el token pero se pierde por que la siguiente ejecución es... (no recuerdo, fue hace un tiempo ya y sigo sin encontrar una solución).

PD: la sentencia setTimeout esta ahí porque el token pierde su uso cada 1h. En fin espero haber sido, claro.

1 respuesta 1

0

Lo que sucede es que los Observables no se comportan como funciones síncronas, por lo que lo más probable es que la función retorne token antes de que este sea reasignado.

Ahora, hay más de una forma de solucionar esto. Sin embarqgo, tendrás que hacer uso de un flujo asíncrono. Por ejemplo:

async getAPIKey() {
    const urlServer = `https://url.com`;
    return (await this.http.get(urlServer).toPromise()).access_token;
}

O:

async getAPIKey() {
    const urlServer = `https://url.com`;
    return new Promise((resolve) => {
       this.http.get(urlServer).subscribe((data) => {
           resolve(data.access_token);
       });
    }).unsubscribe();
}

Evidentemente, se entiende que estas soluciones no están controlando posibles excepciones o errores. Por lo que han de requerir del uso del método catch() donde de implementen.

Por otro lado, si lo que necesitas es trabajar exclusivamente con Observables, te recomiendo usar una propedad de la clase con la que estás trabajando (en tanto esta sea un componente o directiva de Angular. Por ejemplo:

@Component({ ... })
export class ClaseNoEspecificadaEnElProblema {
    private token!: string | undefined;

    constructor (
        private readonly http: HttpClient,
    ) {}
    
    getAPIKey() {
        const urlServer = 'https://url.com';
        this.http.get(urlServer).subscribe(data => {
            this.token = data.access_token;
        }).unsubscribe();
    }
}
5
  • no, no hace falta trabajar con Observable, siempre que funciones pero... sigue igual, ya habia usado async pero con el respectivo catch((e) => console.error(e)); pero me da el mismo resultado, fuera de la funcion async se pierde el valor. Acabo de agregar la clase
    – Cristian
    Commented el 28 may. 2021 a las 20:28
  • Cuidado con la segunda función. ya que, aunque mencionas que el token se ha de renovar cada hora (aunque en la función lo inicializas en 5 segundos de instanciada la función), en principio no asignas un valor. En el código está declarado como let token: string;, lo cual se traduce en un objeto undefined
    – KBeDev
    Commented el 28 may. 2021 a las 20:40
  • lo del tiempo era solo para ver si funcionaba. let token: string; es undefined ya veo, gracias. Pero xq en los console la 1ra salida, tiene valor; la 2da es undefined por eso mi duda es xq no perdura, fuera dl subscribe lo mismo usando async. Quizá la cuestión esta en como definir la variable... no sé, ya sin ideas
    – Cristian
    Commented el 28 may. 2021 a las 20:45
  • Por otro lado, ya que estás trabajando con un servicio, lo que te recomiendo es trabajar con asíncronos. Qué es lo que intentaste concretamente con este método?
    – KBeDev
    Commented el 28 may. 2021 a las 20:45
  • la función de TOKEN la deje es aparte porque tiene 1h de vigencia y la de la función getQuery más que de consulta es la que prepara el encabezado de lo que se quiere consultar. Ejm: token: aazsxdc; url: https://url.com/comidaAutorizacion%20Bearer%20aazsxdc (algo así la URL completa). Es independiente el token para evitar varias consultas al API.
    – Cristian
    Commented el 29 may. 2021 a las 21:21

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.