Necesito hacer algunos cambios en una aplicación heredada de AngularJS.
Tengo dos métodos en un controlador:
const params: any = {id: 1}; public getGridData(): void { this.dataService.getPanelData(params).then((response: any) => { const dataToBeUsedInGrid = response.data.locationDetails; // extra code } } public getMapData() : void { this.dataService.getPanelData(params).then((response: any) => { const dataToBeUsedInMap = response.data.locationDetails.Coordinates; // extra code } }Y este es el código en dataService que solo está haciendo una llamada a la API:
public getPanelData(params: any) { return this.$http.post(this.dataConfigService.url, params); }Ahora este código está haciendo dos llamadas a la API. Solo hago una llamada api al servidor y uso la respuesta en diferentes lugares ya que la respuesta es la misma en ambas llamadas. Los métodos getGridData y getMapData se llaman de forma asíncrona en una selección de registros y son responsables de mostrar diferentes datos en la misma página.
Conceptualmente, una solución simple sería refactorizar el código (funciones) que llaman a getGridData y getMapData en funciones a las que se pasan los datos que necesitan para actualizar la página como argumento. Llame a las funciones modificadas handleGridData y handleMapData por ahora.
Ahora refactorice la selección de registros para llamar a getPanelData , luego handleGridData y luego handleMapData en el estilo de codificación asincrónica de su elección. Si usa funciones async y el operador await , probablemente pueda alinear el código para las funciones de controlador propuestas, así como manejar los errores con gracia.