Tengo un método en un componente Angular que extrae datos a través de la suscripción HttpClient y los asigna a un atributo this.allData, luego instancia un diccionario vacío de parámetros basado en esto, para pasar a una segunda función:
export class TestComponent implements OnInit { allData: object[] = [] activeData: object = {} constructor(private http: HttpClient) { } ngOnInit(): void { this.getData() this.makeRequestBasedOnData() } getData() { this.http.get(this.url).subscribe(res => { for (let datum of res["data"]) { this.allData.push({ "key": Object.keys(datum)[0], "values": Object.values(datum)[0] }) this.activeData[Object.keys(datum)[0]] = "" } }) } makeRequestBasedOnData() { let testParams = this.activeData console.log(testParam) } } Necesito que estos pasos sucedan secuencialmente. Por el momento, registrar testParams en makeRequestBasedOnData() simplemente muestra un objeto vacío {} . Cuando trato de regresar arbitrariamente en el primer método, aparece un error de TypeScript que no puede asignar una promesa para escribir void .
¿Cómo hago cumplir la sincronicidad aquí a pesar de que ninguno de los métodos realmente devuelve nada?
Puede devolver Observable desde el método getData y continuar con cualquier otro método dentro de la suscripción:
ngOnInit(): void { this.getData().subscribe(() => this.makeRequestBasedOnData()); } getData() { return this.http.get(this.url).pipe( tap(res => { // update allData }) ); }dónde:
El método pipe nos permite proporcionar cualquier tipo de transformación con los datos devueltos por http.get(...) .
tap es un operador rxjs para efectos secundarios, lo que significa que podemos hacer todo lo que queramos con la respuesta sin modificar el flujo de Observable.