0

me ha tocado hacer una funcionalidad en javascript del cual no tengo mucha experiencia. El problema es el siguiente: tengo que hacer una petición que me devuelve una lista de diccionarios con unos userId que representan a una persona además de otros datos. A continuación necesito hacer otra llamada get para conseguir el username de ese identificador y guardarlo en ese primer array de diccionarios para representarlo en el front. Como es posible que en el primer array, varias posiciones tengan el mismo userId me gustaría ahorrar en llamadas guardando esta información en alguna variable pero tengo problemas para acceder a algunas variables del codigo y con la sincronía. El código es el siguiente:

messages;
ngOnInit(): void {
    this.authString = localStorage.getItem('authString');

    this.http.get(environment.apiUrl + '/api/message/', {
      headers: new HttpHeaders({
        "Authorization": "Basic " + this.authString
      })
    }).subscribe(response => {
      this.messages = response;

      let id_names = []
      for (let i in response) {
        if (!id_names.find(id_names => id_names.id === response[i]["id"])) { //si no lo tenemos ya
          let user_res = this.http.get(environment.apiUrl + '/api/users/' + response[i]["userId"], {
            headers: new HttpHeaders({
              "Authorization": "Basic " + this.authString
            })
          }).subscribe(res => {
        
            this.messages[i]["username"]=res["username"]
            id_names.push({id:response[i]["id"], username:res["username"]})
            console.log(id_names)
          });   
        }
        else { // si lo tenemos en id_names
          //No llega nunca a esta parte
        }
      };

    })
  };

El problema es que se ejecuta primero varias veces el primer get y luego el segundo por lo que no se evalúa la condición del if con id_names relleno. Además las variables mueren fuera de los subscribes y no se cómo sacarlas. ¿Alguna forma diferente de hacer el http.get? ¿Alguna forma de acceder a las variables desde fuera?

Gracias.

1
  • Utiliza promesas, es decir, convierte tus obervables en promesas y utiliza la sintaxis de async await. el 16 oct. 2020 a las 13:40

1 respuesta 1

1

Ejemplo de peticiones http ejecutadas secuencia usando await y promesas:

// await debe usarse dentro de una función que sea async
async test() {

  // petición http usando observable
  this.http.get('https://jsonplaceholder.typicode.com/users').subscribe(r => {
    console.log(r);
  });

  // peticiones http usando promesas y await
  // el operador await espera hasta que se resuelva la promesa
  // los datos devueltos por la petición están en la  variable
  // respuesta
  let respuesta1 = await this.http 
    .get("https://jsonplaceholder.typicode.com/users")
    .toPromise(); // convertir la petición a promesa
  
  // la primera petición finalizó, sigue la segunda
  let respuesta2 = await this.http
    .get("https://jsonplaceholder.typicode.com/users")
    .toPromise();

  
}

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.